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")

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