Vue3中的slot

小编今天和大家一起探讨Vue中的插槽(slot)的概念，熟悉Vue的小伙伴都知道父子组件之间可以相互传递数据，但是传递DOM结构的时候，再通过属性的方式就有些麻烦，我们先来看个父子组件的例子

const app= Vue.createApp({    template: `<myform />`})app.component('myform',{    methods:{        handleClick(){            alert('handleClick')        }    },    template: `<div>        <input />        <button @click="handleClick">提交</button>    </div>`})const vm = app.mount("#root")

上面是一个最基本的父子引用的例子，在父组件中使用的是类似h5中input单标签，有的时候我们会有这样的需求，对于上面的提交，我们有的时候希望渲染成一个按钮，有的时候我们只是希望渲染成普通div。这个时候slot就显示出威力了，我们可以把代码写成这样

const app= Vue.createApp({    // 将原来的单标签修改为双标签，标签之间的内容会替换掉子组件中的<slot></slot>    template: `<myform>                <div>提交</div>              </myform>              <myform>                <button>提交</button>              </myform>`})app.component('myform',{    methods:{        handleClick(){            alert('handleClick')        }    },    // 不能在slot直接添加@click方式，可以在外面添加span标签    template: `<div>        <input />        <span @click="handleClick">            <slot></slot>        </span>    </div>`})const vm = app.mount("#root")

其实对于slot，我们肯定不能仅仅满足于此，有的时候也需要进行数据绑定，对于父子组件，遵循的就是父组件中父组件绑定数据，子组件中子组件绑定数据。不会相互混淆

const app= Vue.createApp({    data(){        return {            f_data:'1234'        }    },    template: `<myform>                <test />            </myform>            <myform>                {{ f_data }}            </myform>`})app.component('myform',{    methods:{        handleClick(){            alert('handleClick')        }    },    template: `<div>        <input />        <span @click="handleClick">            <slot></slot>        </span>    </div>`})
app.component('test',{    template: `<div>        test component slot    </div>`})const vm = app.mount("#root")

在定义了slot之后，如果自定义组件之间什么也不传递的话，默认是空字符串，如果我们希望添加默认值的话，可以这样

const app= Vue.createApp({
    template: `<myform></myform>`})app.component('myform',{    methods:{        handleClick(){            alert('handleClick')        }    },    template: `<div>        <input />        <span @click="handleClick">            <slot>这里是插槽的默认值</slot>        </span>    </div>`})const vm = app.mount("#root")

有时候我们希望不同的slot渲染不同的内容，这个时候，具名插槽对我们就很有用了，就像这样

const app= Vue.createApp({    template: `<layout>            // 一定通过template标签，不能将v-slot作用在h5标签上            <template v-slot:header>                <div>header</div>            </template>            <template v-slot:footer>                <div>footer</div>            </template>        </layout>`})app.component('layout',{    template: `<div>        <slot name="header"></slot>        <div>content</div>        <slot name="footer"></slot>    </div>`})const vm = app.mount("#root")

当然，我们也可以通过#简写成这样

const app= Vue.createApp({    template: `<layout>            // 通过#替代v-slot            <template #header>                <div>header</div>            </template>            <template #footer>                <div>footer</div>            </template>        </layout>`})app.component('layout',{    template: `<div>        <slot name="header"></slot>        <div>content</div>        <slot name="footer"></slot>    </div>`})const vm = app.mount("#root")

有时候，我们可能需要在子组件渲染数据，然后在父组件定义不同的标签，这个时候，我们会用到作用域标签

const app= Vue.createApp({    template: `        <mylist />        // 作用域插槽        <mylist v-slot="slotProps">            <span>{{slotProps.item}}</span>            </mylist>        `})
app.component('mylist',{    data(){        return {            list: [1,2,3]        }    },    template: `<div>            <slot v-for="item in list" :item="item"></slot>        </div>`})const vm = app.mount("#root")

大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈