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博客如需转载请紧急联系作者