Vue之插槽Slot理解

刚开始看的时候,以为Vue的插槽和React一样,我定睛一看,md原来不对,怎么越看越像Reactprops.children属性,但是比React这个属性要🐂一点。

插槽内容 (和children就一样了)

给大家搞个🌰

<my-component>这里的内容如果需要保留,就需要在my-component中使用 slot,如果不使用将丢弃这段内容</my-component>

<slot>如果组件被使用 中间并没有传递任何内容的话 这个作为后备内容,也就是默认内容, 如果传递了则覆盖</slot>

多个插槽

多个插槽使用 v-slot 这个指令只能放在 template 上,在使用slot的时候指定name属性,例如

  • my-component.vue
<div>
   <slot name="header"></slot>
</div>
  • main.vue
    <div>
        <my-component>
            <template v-slot:header>    // 可以使用简写 #header
                这是头部插槽内容
            </template>
        </my-component>
    </div>

插槽作用域

主要解决一个常见问题:父组件如何获取子组件的数据 并渲染

  • my-component.vue
<template>
    <div>
         // 将headerData 通过v-bind暴露给父组件
        <slot name="header" v-bind:data="headerData"></slot>
    </div>
</template>

<script>
    export default {
        props: {

        },

        data() {
            return {
                headerData: {name: 'headerData'}
            };
        },
    };
</script>       
  • main.vue

    <div>
        <my-component>
            <template v-slot:header="slotProps">    // 获取到子组件的数据                
                {{slotProps.data.name}}             // 这就是数据
            </template>
        </my-component>
    </div>

注意:父组件在使用子组件的时候 插槽和具名插槽不能嵌套,这样会导致作用域不明确

插槽数据工作原理

实际上就是利用回调函数的机制

function (slotProps) {
  // 插槽内容. 数据就是传递的参数罢了 普通函数 利用回调函数的机制 这样的话还可以对 slotProps进行解构 (有点东西啊,卧槽)
}


// 看看人家的写法。有点想放弃react的冲动
<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

插槽搞完了,快去看我别的文章吧!

本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。

您的支持是对我最大的鼓励!

发表于: 作者:憧憬。
关注互联网以及分享全栈工作经验的原创个人博客和技术博客,热爱编程,极客精神
Github 新浪微博 SegmentFault 掘金专栏