vue slot插槽的使用

时间：2018-08-03 18:08:07 阅读：142 评论：0 收藏：0 [点我收藏+]

标签：head color strong 使用场景一个 for 组件样式头部

slot插槽的使用场景

父组件向子组件传递dom时会用到插槽

作用域插槽：当同一个子组件想要在不同的父组件里展示不同的状态，可以使用作用域插槽。展示的状态由父组件来决定

注：想要修改父组件向子组件传递的元素的样式时，只能在对应的子组件进行修改

1.具名插槽的使用

父组件

</template>

子组件

2.作用域插槽的使用1

父组件

<li>{{props.content}}</li>

</template>

子组件

<ul>

</ul>

export default {

data(){

return {

list:[‘zhangsan‘,‘lisi‘,‘wangwu‘]

}

</script>

3.作用域插槽的使用2

父组件

<tr>

<td>{{props.item.name}}</td>

<td>{{props.item.age}}</td>

</tr>

</template>

子组件

<table>

<tr>

</tr>

</table>

export default {

data(){

return {

data:[{

name:‘张三‘,

age:20

},{

name:‘李四‘,

age:14

},{

name:‘王五‘,

age:10

}]

}

</script>

2.作用域插槽的使用

vue slot插槽的使用

标签：head color strong 使用场景一个 for 组件样式头部

原文地址：https://www.cnblogs.com/zousaili/p/9415434.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行