Vue_使用插槽（slot） - 好文

当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（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>
效果：
我们可以看到显示的并不是我们想要的，当然我们可以在子组件在接受的时候，使用v-html。
<template> <div class="slott"> <div v-html='content1'></div> </div> </template>
效果：

但是缺点是：多生成了一个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>
效果：

效果：

二.引入header组件
在实际开发中，我们经常会遇到一种情况，将 header和footer传进来。
在父组件中：
<slott> <div>header</div> <div>footer</div> </slott>
在子组件中：
<slot></slot> <div>content</div> <slot></slot>
结果：

这是为什么呢？slot标签代表的显示插槽的所有的内容，那如何达到我们想要的效果呢？我们可以用具名插槽。
父组件的插槽中命名。
<slott> <div slot="header">header</div> <div slot="footer">footer</div> </slott
>
在子组件引用名称
<slot name="header"></slot> <div>content</div> <slot name="footer"></slot>
效果：

附：slot标签可以有默认值，如果找不到相关的插槽，就会显示默认值。
在插槽中去掉header
<slott> <div slot="footer">footer</div> </slott>
在调用的时候找不到header的话，就会显示默认的内容
<slot name="header">default</slot> <div>content</div> <slot name="footer"></
slot>
效果：

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

什么时候用作用域插槽呢？当子组件做循环或者某一部分它的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
] }
效果：

父组件也可以改为li：
<slott> <template slot-scope="props"> <li>{{props.item}}</li> </template> </
slott>
效果：

这样的话，就实现了由父组件决定实现的内容

热门工具换一换