联盟文明网站建设有新百度账号登陆入口

插槽：用于在子组件的指定位置插入指定内容，类似在电梯里挂的若干广告显示屏，可以给指定的位置传入指定的广告

单插槽（匿名/默认插槽）

父组件中（ 此时的 ）

        <Child><template><p>身体</p></template></Child>

或（ 默认插槽的 template 标签可以省略）

        <Child><p>身体</p></Child>

子组件中

    <div><p>头</p><slot>默认内容 （当父组件标签内无内容时，会显示！）</slot><p>脚</p></div>

多插槽（具名插槽）

• 通过 slot 属性或 v-slot 指令（可简写为 # ）指定插槽的位置，支持中文。

• slot 和v-slot 可以用在template标签上（推荐），也可以直接用于 html 标签上。

父组件

<Child><template slot='head'>头</template><template slot='foot'>脚</template>
</Child>

或

<Child><template v-slot:head>头</template><template v-slot:foot>脚</template>
</Child>

或

<Child><template #head>头</template><template #foot>脚</template>
</Child>

子组件中

    <div><slot name="head"></slot><p>身体</p><slot name="foot"></slot></div>

最终页面效果

头
身体
脚

插槽传值（作用域插槽）

子组件可以通过插槽给父组件传值

v-slot 接收参数 （用于 v-slot 指令标记插槽）

子组件中，将变量status动态绑定到slot标签上

    <div><p>头</p><slot  name="body"  :status="status"></slot><p>脚</p></div>

        data(){return{status:'健康的'}}

父组件中，通过 v-slot 接收，子组件通过插槽传入的所有变量，都存在slotProps对象中。

        <Child><template v-slot:body="slotProps"><p>{{slotProps.status}}身体</p></template></Child>

slot-scope 接收参数 （用于 slot 属性标记插槽）

子组件

<button><slot name="插槽1" :info="info"></slot>
</button>

data() {return {info: {name: '朝阳'}}
}

父组件，通过slot-scope接收子组件通过插槽传入的值（ slot-scope 里的 {} 是进行解构赋值）

<Child><template slot="插槽1" slot-scope="{info}"><p>{{info}}</p></template>
</Child>