Vue_使用插槽（slot）

当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（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博客如需转载请紧急联系作者