Vue_使用插槽（slot）

╰半夏微凉° 2022-05-22 13:42 320阅读 0赞

当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（DOM）的数据，那么如何传值呢？

如果我们像正常父向子传值那样操作。

<slott content="<p>hello,slot</p>"></slott>

子组件：

<template> <div class="slott"> <div>{ { content1}}</div> </div> </template> <script> export default{ props:['content'], data(){ return{ content1 : this.content, } } } </script>

效果：![这里写图片描述][70]  
我们可以看到显示的并不是我们想要的，当然我们可以在子组件在接受的时候，使用v-html。

效果：  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]  
但是缺点是：多生成了一个div标签，那换成template模板占位符呢？是渲染不出来这个效果的。

div标签虽然可以实现，但是如果有很多DOM元素呢？显然不好控制，所以Vue中提供了slot插槽的方式

**一.插槽**

在父组件中直接插入正常的DOM结构

<slott>
         <p>你好solt!</p>
     </slott>

然后在子组件用`<slot>`来代替，所以说slot是保留字，不能当做id的

<template>
        <div class="slott">
        <slot></slot>
      </div>
    </template>
    <script> export default{ props:['content'], data(){ return{ content1 : this.content, } } </script>

效果：  
![这里写图片描述][70 3]  
效果：  
![这里写图片描述][70 4]  
二.引入header组件  
在实际开发中，我们经常会遇到一种情况，将 header和footer传进来。  
在父组件中：

<slott>
       <div>header</div>
       <div>footer</div>
    </slott>

在子组件中：

<slot></slot>
       <div>content</div>
       <slot></slot>

结果：  
![这里写图片描述][70 5]  
这是为什么呢？slot标签代表的显示插槽的所有的内容，那如何达到我们想要的效果呢？我们可以用具名插槽。  
父组件的插槽中命名。

<slott>
       <div slot="header">header</div>
       <div slot="footer">footer</div>
    </slott>

在子组件引用名称

<slot name="header"></slot>
       <div>content</div>
       <slot name="footer"></slot>

效果：  
![这里写图片描述][70 6]  
附：slot标签可以有默认值，如果找不到相关的插槽，就会显示默认值。  
在插槽中去掉header

<slott>
       <div slot="footer">footer</div>
    </slott>

在调用的时候找不到header的话，就会显示默认的内容

<slot name="header">default</slot>
          <div>content</div>
          <slot name="footer"></slot>

效果：  
![这里写图片描述][70 7]

**二.作用域插槽**  
有时候，我们在使用插槽的时候，希望父组件可以控制插槽的内容，

什么时候用作用域插槽呢？当子组件做循环或者某一部分它的DOM结构应该由外部传递进来的时候，这个时候我们用作用域插槽

使用作用域插槽，子组件会向父组件的作用域里传递数据。  
父组件使用插槽，要包含在template标签中。props是自定义的名字  
eg：

<slott> <template slot-scope="props"> <h1>{ { props.item}}</h1> </template> </slott>

子组件往外传递数据：

<slot 
          v-for="item of list" 
          :item=item>
      </slot>
     //data中：
    return{
          list:[1,2,3,4]
        }

效果：  
![这里写图片描述][70 8]  
父组件也可以改为li：

<slott> <template slot-scope="props"> <li>{ { props.item}}</li> </template> </slott>

效果：  
![这里写图片描述][70 9]  
这样的话，就实现了由父组件决定实现的内容

[70]: /images/20220522/afe4b9939750481cb8a1b3399b1958fc.png
[70 1]: /images/20220522/3d92ea045ead4ef299772e99799f806f.png
[70 2]: /images/20220522/8c86ec86ceeb4ecab52dc2a3a8b41936.png
[70 3]: /images/20220522/c17556bbf8a14de79ef4deb3bce2f03e.png
[70 4]: /images/20220522/a034d4aefb9946c4b60a1d9daf28bdee.png
[70 5]: /images/20220522/12276ab77c6e4710ae9d967a931a27ab.png
[70 6]: /images/20220522/e992e172cc06483c9634c9530e8fda8e.png
[70 7]: /images/20220522/33b090e7b1f3460cbd3bb75fbebb82b3.png
[70 8]: /images/20220522/504c356a888943409e1ff731b47e874e.png
[70 9]: /images/20220522/36a7bae556c04bd79e64f20de269074a.png