vue slot插槽

为什么使用插槽：

因为封装组件的时候一些功能有区别，但是也有很多共性，这时候需要预留一些slot，使用的时候填内容 //抽取共性，保留不同！组件的插槽为了让封装的组件更具有扩展性！

slot插槽的类别：

slot标签内为空：

slot标签是用在组件中的一个预留的插槽
<div id="app">
<cpn></cpn> //结果只有<p>slot插槽的使用</p>
<cpn><button>在插槽中插入东西</button></cpn> //结果：<p>slot插槽的使用</p> <button>在插槽中插入东西</button> //在cpn标签内写东西相当于把slot插入了新的东西
</div>
<temalate id="cpn">
<div>
<p>slot插槽的使用</p>
<slot></slot>
</div>
</temalate>

默认值的slot
<slot><i>默认值</i></slot>
具名的slot 。如果有多个slot的时候，需要给slot设置名字，以便于修改 //具体的替换

<cpn> <button slot="setname">修改后的值</button> </cpn>
//需要给cpn标签中更改的标签加slot属性名，属性值为slot标签的name的属性值
<slot name = "setname"><i>默认值</i></slot>

作用域插槽

作用域：父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
父组件替换插槽的标签，但是内容由子组件提供，插槽中拿到子组件的数据

image

图片中，:data="planguage" 其中data是自定义名称，但是在父组件用的时候要和它的名字相同且外部要有template标签，比如上面的slot.data。planguage是需要获取的子组件的数据slot替换的时候需要使用标签包裹为了兼容性最好用template标签slot-scope="slot" 属性是必须值,当然属性值是自己设置的

$slots可以获取使用插槽的标签只有父标签使用slot进行替换时才有

2.6版本改版后的v-slot ,语法糖为 (#) 井号

具名的插值的父页面中的由slot="xxx"换为了 v-slot:xxx，子组件还是name="xxx"
- <base-layout>
  <templatev-slot:header><h1>Here might be a page title</h1></template>
  </base-layout>
- <slot name="header">默认值</slot>
注意 v-slot 只能添加在 <template> 上
作用域插值由slot-scope="子组件传递来的值的名字" 换为了v-slot:default="子组件传递来的值的名字"，default是默认没有name的，有name则换为v-slot:name="xxx" 不带参数的 v-slot 被假定对应默认插槽：

最后编辑于：2020.05.10 20:52:11