vue slot插槽的使用
Posted zousaili
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue slot插槽的使用相关的知识，希望对你有一定的参考价值。
slot插槽的使用场景
父组件向子组件传递dom时会用到插槽
作用域插槽：当同一个子组件想要在不同的父组件里展示不同的状态，可以使用作用域插槽。展示的状态由父组件来决定
注：想要修改父组件向子组件传递的元素的样式时，只能在对应的子组件进行修改
1.具名插槽的使用
父组件
<template slot="header">
<p>我是头部</p>
</template>
子组件
<slot name="header"></slot>
2.作用域插槽的使用1
父组件
<template slot-scope="props">
<li>{{props.content}}</li>
</template>
子组件
<ul>
<slot v-for="item of list" :content=item></slot>
</ul>
<script>
export default {
data(){
return {
list:[‘zhangsan‘,‘lisi‘,‘wangwu‘]
}
}
}
</script>
3.作用域插槽的使用2
父组件
<template slot-scope="props">
<tr>
<td>{{props.item.name}}</td>
<td>{{props.item.age}}</td>
</tr>
</template>
子组件
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<slot v-for="item of data" :item=item></slot>
</table>
<script>
export default {
data(){
return {
data:[{
name:‘张三‘,
age:20
},{
name:‘李四‘,
age:14
},{
name:‘王五‘,
age:10
}]
}
}
}
</script>
2.作用域插槽的使用
以上是关于vue slot插槽的使用的主要内容，如果未能解决你的问题，请参考以下文章