400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

Vue中的插槽、内容分发、具名插槽应用实例分析

今天小编给大家分享一下Vue中的插槽、内容分发、具名插槽应用实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

创新互联长期为近1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为博野企业提供专业的网站建设、成都网站建设博野网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

插槽 Slots简介

Vue中组件的数据可以通过props进行传递,或者通过事件的方式进行获取传递,但当需要接收模板内容(任意合法的模板内容,代码片段、Vue组件)时,就需要使用插槽来实现了。当然也可以通过函数式编程间接实现。

Vue中的插槽、内容分发、具名插槽应用实例分析

// 父元素传入插槽内容
FancyButton('Click me!')

// FancyButton 在自己的模板中渲染插槽内容
function FancyButton(slotContent) {
    return `
      ${slotContent}
    `
}

slot-scope浅析

常规的slot可以用于自定义组件的模板,但只是限制于固定的模板,无法自定义内部的具体的某一项,即常规的slot无法实现对组件循环体的每一项进行不同的内容分发,此时可以通过slot-scope进行实现,本质上和slot一样,不同点在于可以进行参数传递

//普通的组件定义

        
        {{ book.name }}
        



//slot-scope组件定义

        
            
                
                {{ book.name }}
            
        


//父组件使用

    
        限时优惠
        {{ slotProps.book.name }}
    

使用slot-scope时,当父组件使用该API,对应的插槽会替换模板中的slot进行展示

常用API浅析
具名插槽

在组件中定义多个插槽出口可以兼容多个不同需求的兼容性,使得多个插槽内容传入到各自的插槽出口中;当插槽中配置了name属性时,此插槽就被称为具名插槽(named slots),没有提供name的插槽会隐式命名为「default」

Vue中的插槽、内容分发、具名插槽应用实例分析


    
    
    
        

A paragraph for the main content.


        

And another one.


    
    
        

Here's some contact info


    

作用域插槽

普通的插槽,是无法获取其他作用域下的数据的,即父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域
但在某些情况下,插槽中的内容想要同时使用父组件和子组件内的数据,可以通过像组件传递数据props那样,让子组件在渲染时将一部分数据提供给插槽,这样在组件外部(父组件)中就可以使用子组件中的数据了-通过slot的方式

子组件传入插槽的 props 作为了 v-slot 指令的值,可以在插槽内的表达式中访问,其中name是Vue特意保留的attribute,不会作为props进行传递

//子组件


    
    
555

    
    
        
{{scope.name}}

    

    
    
        
{{scope}}

        
{{scope.name}}

        
{{scope.age}}

    

// data: {
//     shapes: [
//         { name: 'Square', sides: 4 },
//         { name: 'Hexagon', sides: 6 },
//         { name: 'Triangle', sides: 3 }
//     ],
//     colors: [
//         { name: 'Yellow', hex: '#F4D03F', },
//         { name: 'Green', hex: '#229954' },
//         { name: 'Purple', hex: '#9B59B6' }
//     ]
// }

    
        
{{ shape.name }} ({{ shape.sides }} sides)

    


    
        

            

            {{ color.name }}
        
    


    {{ title }}
    
        
            
        
    



Vue.component('my-list', {
    template: '#my-list',
    props: [ 'title', 'items' ]
});

递归组件

递归组件就是指组件在模板中调用自己,由于是组件自身调用,就不能像常规组件定义一样,可以省略组件的name配置,组件的递归需要依赖于自身的name配置(name还用于遍历组件的name选项来查找组件的实例);


动态组件

有时候我们需要根据一些条件,动态的切换/选择某个组件,在函数式组件中,没有上下文的概念,常用于程序化的在多个组件中选择一个,可以间接的解决动态切换组件的需求,缺点是基于js对象进行开发,不方便开发;
Vue官方提供了一个内置组件和is的属性,用来解决上述的问题


//component 就是js import进的组件实例,其值可以是标签名、组件名、直接绑定一个对象等

为了使得组件具有缓存作用,可以使用的内置组件,这样只要不离开当前页面,切换到其他组件后deforeDestory不会执行,因此组件具有了缓存功能

拓展

components的第二种写法

常规的组件components是直接通过引用定义好的组件进行展示的,也可以直接在当前组件内定义,然后通过配置components进行渲染


    


    

        

Lbxin


        

class - 11


    


Web Component 简介

HTML的slot元素,是Web Components技术套件的一部分,是Web组件内的一个占位符,该占位符可以在后期使用自己的标记语言进行填充,这样可以创建单独的DOM树,并将其与其他的组件组合在一起 -- MDN

常见的填充Web组件的shadow DOM的模板有template和slot

如常见的video标签,其内部的一些控制器和按钮等都是通过Shandow DOM进行维护的,开发者可以通过这个API进行自己独立的逻辑控制

以上就是“Vue中的插槽、内容分发、具名插槽应用实例分析”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


标题名称:Vue中的插槽、内容分发、具名插槽应用实例分析
标题链接:http://mbwzsj.com/article/jcspcs.html

其他资讯