当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（DOM）的数据，那么如何传值呢？
如果我们像正常父向子传值那样操作。
<slott content="<p>hello,slot</p>"></slott>
- 1
子组件：
<template> <div class="slott"> <div>{{content1}}</div> </div> </template> <script>
export default{
props:['content'],
data(){
return{
content1 : this.content,
}
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
效果：
我们可以看到显示的并不是我们想要的，当然我们可以在子组件在接受的时候，使用v-html。
<template> <div class="slott"> <div v-html='content1'></div> </div> </template>
- 1
- 2
- 3
- 4
- 5
效果：
但是缺点是：多生成了一个div标签，那换成template模板占位符呢？是渲染不出来这个效果的。
div标签虽然可以实现，但是如果有很多DOM元素呢？显然不好控制，所以Vue中提供了slot插槽的方式
一.插槽
在父组件中直接插入正常的DOM结构
<slott> <p>你好solt!</p> </slott>
- 1
- 2
- 3
然后在子组件用<slot>来代替，所以说slot是保留字，不能当做id的
<template> <div class="slott"> <slot></slot> </div> </template> <script>
export default{
props:['content'],
data(){
return{
content1 : this.content,
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果：
效果：
二.引入header组件
在实际开发中，我们经常会遇到一种情况，将 header和footer传进来。
在父组件中：
<slott> <div>header</div> <div>footer</div> </slott>
- 1
- 2
- 3
- 4
在子组件中：
<slot></slot> <div>content</div> <slot></slot>
- 1
- 2
- 3
结果：
这是为什么呢？slot标签代表的显示插槽的所有的内容，那如何达到我们想要的效果呢？我们可以用具名插槽。
父组件的插槽中命名。
<slott> <div slot="header">header</div> <div slot="footer">footer</div> </slott>
- 1
- 2
- 3
- 4
在子组件引用名称
<slot name="header"></slot> <div>content</div> <slot name="footer"></slot>
- 1
- 2
- 3
效果：
附：slot标签可以有默认值，如果找不到相关的插槽，就会显示默认值。
在插槽中去掉header
<slott> <div slot="footer">footer</div> </slott>
- 1
- 2
- 3
在调用的时候找不到header的话，就会显示默认的内容
<slot name="header">default</slot> <div>content</div> <slot name="footer"></slot>
- 1
- 2
- 3
效果：
二.作用域插槽
有时候，我们在使用插槽的时候，希望父组件可以控制插槽的内容，
什么时候用作用域插槽呢？当子组件做循环或者某一部分它的DOM结构应该由外部传递进来的时候，这个时候我们用作用域插槽
使用作用域插槽，子组件会向父组件的作用域里传递数据。
父组件使用插槽，要包含在template标签中。props是自定义的名字
eg：
<slott> <template slot-scope="props"> <h1>{{props.item}}</h1> </template> </slott>
- 1
- 2
- 3
- 4
- 5
子组件往外传递数据：
<slot
v-for="item of list"
:item=item>
</slot>
//data中： return{
list:[1,2,3,4]
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
效果：
父组件也可以改为li：
<slott> <template slot-scope="props"> <li>{{props.item}}</li> </template> </slott>
- 1
- 2
- 3
- 4
- 5
效果：
这样的话，就实现了由父组件决定实现的内容
原文发布时间：06月30日
原文作者：_dalianmiao
本文来源CSDN博客如需转载请紧急联系作者
