当前位置：首页 > news >正文

默认插槽，具名插槽（v-slot:具名，name=‘ ‘),作用域插槽

news 2024/12/13 21:38:47

在App.vue父组件需要两次调用MyDialog子组件，但是想要两个子组件中略有不同。

1.首先在父组件中引入子组件，定义子组件，展示组件标签

2.不一样的地方在子组件中放<slot>标签占位

3.在父组件中的子组件标签中写上不一样的内容，就能展示两个略有不同的子组件了

给插槽设置默认值：

在slot标签中写上内容，如果组件标签中没有写入内容，那么就显示默认内容，如果组件标签中写入了内容，那么就显示组件标签中的内容

具名插槽：

1.子组件slot标签占位，给name属性起名字来区分各个部分插槽

2.父组件中子组件标签里用template标签包裹各个部分插槽内容，并且在各个template标签中使用v-slot = 插槽名来对应子组件中各个部分插槽

（子name ，父 v-slot :插槽名 / 父 #插槽名）

作用域插槽：

通过在父组件的子组件标签中向子组件传递数据，子组件props接收，通过v-for指令进行遍历渲染。

两个表单组件的不同之处在于一个最后一列是“删除”按钮，一个最后一列是“查看”按钮，其他一样，这时可通过slot标签定义不一样的按钮部分

删除部分按钮写在子组件标签中，需要注册一个删除事件，但是删除事件需要的 id 实参是来自子组件的，所以需用子组件slot标签以添加属性的方式传过来item，接着通过filter保留id不一样的数组中的对象

(写两份组件标签，两份标签格子传值，能渲染两份内容）

<!-- APP.vue -->
<template><div><MyTable :data="list"><!-- 通过template #插槽名=变量名来接收，obj（任取)接收的就是一整个对象 --><template #default="obj"><button @click="del(obj.row.id)">删除</button></template></MyTable><MyTable :data="list2"><!-- {row}直接解构 --><template #default="{row}"><button @click="show(row)">查看</button></template></MyTable></div>
</template><script>
import MyTable from './components/MyTable.vue'
export default {data() {return{list:[{id:1,name:'张三',age:20},{id:2,name:'李四',age:25},{id:2,name:'王五',age:26}],list2:[{id:1,name:'小红',age:20},{id:2,name:'小明',age:26},{id:3,name:'小米',age:23}]}},components:{MyTable,},methods:{del(id) {// v-for中遍历的是每一行item，将item与测试文本打包成对象传过来，通过插槽名=变量来接收，将对象中的id名作为实参传入button注册的事件中。该事件函数利用filter遍历数组中每个对象的id，将遍历到的每个id与传入的实参id进行比较，要是id不一样，就将遍历到的id的对象保留下来，然后就实现了点击到的id删除了的效果this.list=this.list.filter(item => item.id !== id)},show(row){// console.log(row)alert(`姓名：${row.name};年纪：${row.age}`)}}}
</script><style></style>

<!-- MyTable.vue -->
<template><table class="my-table"><thead><tr><th>序号</th><th>姓名</th><th>年纪</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in data" :key="item.id"><td>{{ index+1 }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td><!-- 1.给slot标签以添加属性的方式传值 --><slot :row="item" msg="测试文本" ></slot><!-- 2.将所有属性添加到一个对象里,是将这一整个对象传过去 --><!-- {row：{id:2,name:'李四'，age:25},msg:'测试文本'}--></td></tr></tbody></table></template><script>
export default {props: {data: Array,},
}
</script><style scoped>
.my-table {width: 450px;text-align: center;border: 1px solid #ccc;font-size: 24px;margin: 30px auto;
}
.my-table thead {background-color: #1f74ff;color: #fff;
}
.my-table thead th {font-weight: normal;
}
.my-table thead tr {line-height: 40px;
}
.my-table th,
.my-table td {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;
}
/* 选择每一行的最后一个td */
.my-table td:last-child {border-right: none;
}
/* 类下的最后一行的所有td */
.my-table tr:last-child td {border-bottom: none;
}
.my-table button {width: 65px;height: 35px;font-size: 18px;border: 1px solid #ccc;outline: none;/* 去掉按钮的虚线边框 */border-radius: 3px;cursor: pointer;background-color: #ffffff;margin-left: 5px;
}
</style>