Vue 中有三种常用的插槽，分别是默认插槽、具名插槽和作用域插槽。下面是它们的具体用法案例。
- 默认插槽
默认插槽是最常用的插槽，它可以用来传递任意内容。下面是一个例子：
<!-- 父组件 --> <template> <div> <h1>默认<em>插槽</em>示例</h1> <child-component> <p>这是通过默认<em>插槽</em>传递的内容。</p> </child-component> </div> </template> <!-- 子组件 --> <template> <div> <h2>子组件</h2> <slot></slot> </div> </template> 讯享网
在上面的例子中，父组件中使用了默认插槽传递了一个 <p> 标签到子组件中，并且子组件中使用了 <slot> 标签来渲染插槽内容。
- 具名插槽
具名插槽可以用来传递多个插槽，并且可以为每个插槽命名。下面是一个例子：
讯享网<!-- 父组件 --> <template> <div> <h1><em>具名</em><em>插槽</em>示例</h1> <child-component> <!-- 通过 name 属性指定<em>插槽</em>名称 --> <template v-slot:header> <h2>这是头部<em>插槽</em>的内容。</h2> </template> <template v-slot:footer> <h2>这是底部<em>插槽</em>的内容。</h2> </template> </child-component> </div> </template> <!-- 子组件 --> <template> <div> <h2>子组件</h2> <slot name="header"></slot> <slot name="footer"></slot> </div> </template> 在上面的例子中，父组件中使用了具名插槽传递了两个插槽到子组件中，分别是头部插槽和底部插槽，并且子组件中使用了 <slot> 标签并通过 name 属性指定了插槽名称。
- 作用域插槽
作用域插槽可以用来传递数据到插槽中，并且可以在插槽中使用这些数据。下面是一个例子：
<!-- 父组件 --> <template> <div> <h1>作用域<em>插槽</em>示例</h1> <child-component> <!-- 通过 v-slot:default 定义默认<em>插槽</em> --> <template v-slot:default="slotProps"> <p>{{slotProps.text}}</p> <button @click="slotProps.onClick">点击</button> </template> </child-component> </div> </template> <!-- 子组件 --> <template> <div> <h2>子组件</h2> <!-- 定义 props --> <slot :text="text" :onClick="onClick"></slot> </div> </template> <script> export default { data() { return { text: '这是通过作用域<em>插槽</em>传递的文本。', }; }, methods: { onClick() { alert('点击了按钮！'); }, }, }; </script> 在上面的例子中，父组件中通过作用域插槽传递了一个文本和一个点击事件到子组件中，并且子组件中使用了 <slot> 标签，并且通过 props 将数据传递给插槽，然后在插槽中使用这些数据。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/171092.html