vue3插槽

标签：相同   内容   之间   dex   实例   otn   name   script   需要   

插槽

将元素作为承载分发内容的出口

<todo-button>
 Add todo
</todo-button>

// to-do 组件模板
<button>
<slot></slot>
</button>

插槽可以包含任何的模板代码

• HTML
• 组件

如果template中没有包含一个元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

渲染作用域

• 插槽中使用数据，可以访问与模板其余部分相同的实例property(即相同的作用域)
• 插槽不能访问子组件的作用域

父级模板里所有内容都是在父级作用域中编译的；子模版里的所有内容都是在子作用域中编译的

后备内容

为插槽设置具体的后备（默认的数据）,将默认内容放入slot中

具名插槽

// 子组件
// 不带name的出口带哦与隐含的名字default
<slot name="content"></slot>
// 父组件
// v-slot只能添加<template>上（例外）
<template v-slot="content"></template>

作用域插槽

让插槽内容能够访问子组件中的才有的数据

只有子组件可以访问item数据，子组件内的插槽是不可以直接进行访问的

// 要使item可用于提供内容的slot内容，可以添加一个<slot>元素并将其绑定为属性
<ul>
    <li v-for="(item,index) in items">
        <slot :item="item"></slot>
    </li>
</ul>

绑定在元素上的attribute被称为插槽prop。现在在父级作用域中，问哦们可以使用带值的v-slot来定义我们的提供的插槽prop的名字
只要出现多个插槽，请始终为所有的插槽使用完整的基于

vue3插槽

标签：相同   内容   之间   dex   实例   otn   name   script   需要   

原文地址：https://www.cnblogs.com/wukun-sole/p/14486603.html