Vue slot插槽

时间：2022-01-07 19:47:20

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

插槽作用域

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

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

插槽元素

<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 class="title"><slot name="name">标题</slot></div>

             <div class="main"><slot>内容</slot></div>

             <div class="main"><slot name="qita">其它</slot></div>

        </div>

    `

    });

<!-- 向插槽提供数据 -->

    <div class="app">

        <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:[....]

https://pan.baidu.com/s/1DxVAkfDluQkAQwE5h5kVLA

相关文章