Vue slot插槽

时间: 2019-03-12阅读: 37标签: slot

插槽用于内容分发,存在于子组件之中。


插槽作用域

父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪。

子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据。


插槽元素

<slot></slot> 或 <slot name="名称">默认值</slot>

1:如果定义了slot插槽元素,那么子组件之间的内容将会被插入到插槽元素之中。(可简单理解为向插槽提供内容)
2:如果定义了slot插槽元素,并没有在子组件之间插入内容,那么将使用默认值。(不提供内容,将使用默认值)
3:如果没有定义slot元素,那么子组件之间的内容将会被废弃。

// 定义组件
Vue.component("my-test",{
    template:`<div><slot>默认值</slot></div>`
})

// 向插槽提供内空
<my-test>hello slot</my-test>


多插槽元素

当子组件中有多个插槽元素时,要为每个插槽name特性定义名称。

1:如果没有定义名称,那么采用默认名称:default;用于存放不指定名称的内容

2:如果多个插槽没有定义名称或名称相同的情况下,那么v-slot(# 缩写)指令将无法找到对应插槽或混乱。

3:多个插槽时v-slot指令配合template一起使用,如果只有单个可直接写到子组件上。

// 定义插槽
    Vue.component("my-test",{
        template:`
        <div>
             <div><slot name="name">标题</slot></div>
             <div><slot>内容</slot></div>
             <div><slot name="qita">其它</slot></div>
        </div>
    `
    });

<!-- 向插槽提供数据 -->
    <div>
        <my-test>
            <template v-slot:name>
                <h4>vuejs</h4>
            </template>
            <p>v-slot、slot元素</p>
            <p>template</p>
            <template v-slot:qita>
                <p>恩</p>
            </template>
        </my-test>
    </div>


访问插槽数据

父组件在向子组件的插槽提供内容的时候,有时需要访问子组件中的数据,那么可以利用v-bind指令在插槽上绑定变量来实现。

字面量写法:

v-slot:default="自定义名称"

解构写法 : 与ES6中解构对象写法一样。

v-slot:default="{data = {name:"whowhowho"}}"

变量重命名

v-slot:default="{data : ddd}"

Vue.component("my-test",{
        template:`<div class="main"><slot :data="user">内容</slot></div>`,
        data(){
            return {
                user:{
                    name:'小明',
                    age:'110'
                }
            }
        }
    });

    <div class="app">
        <my-test>
            <template v-slot="o">
                {{o.data.name}}、{{o.data.age}}
            </template>
        </my-test>
        <my-test>
            <template v-slot:default="{data}">
                {{data.name}}、{{data.age}}
            </template>
        </my-test>
        <my-test>
            <template v-slot:default="{data:dd}">
                {{dd.name}}、{{dd.age}}
            </template>
        </my-test>
    </div>


动态插槽名

与ES6中动态属性名写法一样。 v-slot:[....]


fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全