插槽(slot)可以实现父与子组件间通信,即想让父组件在指定位置插入一些信息。
插槽分为三种:默认插槽、具名插槽、作用域插槽
默认插槽
子组件代码:
<h1>我是子组件默认插槽--父组件中子组件标签中的数据会放入slot中</h1> <!-- 默认插槽 --> <slot></slot>
父组件代码:
<Test> <div> <pre>大即将到期浪淘尽,千古分流人物,还看今朝,好好学习,厚积薄发</pre> </div> </Test>
具名插槽
子组件中,slot增加name属性
<h1>具名插槽填充数据</h1> <slot name="a"></slot> <slot name="b"></slot>
父组件中,使用template标签指定具体的v-slot来表示插槽位置
<template v-slot:a> <div> <div>我是往具名插槽a中填充的内容</div> </div> </template> <template v-slot:b> <div> <div>我是往具名插槽b中填充的内容</div> </div> </template>
作用域插槽
指可以传递数据的插槽,子组件可以将数据传回给父组件,父组件决定这些回传数据
另外:以下代码可以学习一下,给style添加动态的属性,如果item.done是false那么color为green,否则color为red
<!-- style 动态表达式 可以学习一下 冒号后面就可以写表达式包括三元运算符 --> <li :style="{color: item.done ? 'green' : 'red'}" v-for="(item, index) in todo" :key="item.id" > {{ item.title }} </li>
子组件:
props接收来的参数后,通过$row来返回给父组件
子组件代码:
<h1>作用域插槽</h1> <ul> <li v-for="(item, index) in todo" :key="item.id" > <!-- 作用域插槽的特点:可以将数据回传给父组件 --> <slot :$row="item"></slot> </li> </ul>
父组件:使用template中的v-slot接收子组件的参数,并重新渲染会子组件
<template> <div> <h1>slot</h1> <Test1 :todo="todo"> <template v-slot="{ $row}"> <div> <!-- 下面是子组件回传过来的数据 --> <span :style="{color:$row.done? 'green' : 'red'}" >{{ $row.title }}</span > </div> </template> </Test1> <Test> <div> <pre> 大即将到期浪淘尽,千古分流人物,还看今朝,好好学习,厚积薄发</pre > </div> <template v-slot:a> <div> <div>我是往具名插槽a中填充的内容</div> </div> </template> <template v-slot:b> <div> <div>我是往具名插槽b中填充的内容</div> </div> </template> </Test> </div> </template> <script setup lang="ts"> import Test from "./Test.vue"; import Test1 from "./Test1.vue"; // 插槽:默认插槽、具名插槽、作用域插槽 // 作用域插槽:可以传递数据的插槽,子组件可以将数据传回给父组件,父组件决定这些回传数据 import { ref } from "vue"; let todo = ref([ { id: 1, title: "吃饭", done: true }, { id: 2, title: "睡觉", done: false }, { id: 3, title: "打豆豆", done: true }, { id: 4, title: "编程", done: false }, ]); </script> <style scoped></style>
标签:slot,title,--,插槽,具名,间通信,作用域,组件 From: https://www.cnblogs.com/yansunda/p/18456263