Vue插槽slot
使用了那么久的vue，到现在才知道vue自带的组件插槽slot，说真的，插槽的作用在一些场景下非常有用。
插槽分为单个插槽、具名插槽、作用域插槽。其中作用域插槽会稍显复杂。
单个插槽：
子组件testSlot.vue：
<template>
<div class="">
<p>子组件共有的</p>
<slot></slot>
<p>子组件共有的</p>
</div>
</template>父组件：
引入import sonSlot from"./testSlot";
注册：components: {sonSlot}
父组件使用：
<sonSlot>
<p>我是父组件内容，会替换子组件slot插槽的内容</p>
<span>测试多个父组件内容怎么替换子组件slot插槽内容</span>
</sonSlot>效果：
具名插槽：
子组件testSlot.vue：
<template>
<div class="">
<p>子组件共有的</p>
<slot></slot>
<slot name="one"></slot>
<slotname="two"></slot>
<p>子组件共有的</p>
</div>
</template>父组件：
引入import sonSlot from"./testSlot";
注册：components: {sonSlot}
父组件使用：
<sonSlot>
<p>我是父组件内容，会替换子组件slot插槽的内容</p>
<span>测试多个父组件内容怎么替换子组件slot插槽内容</span>
<p slot="one">我是父组件，会替换插槽name为one的内容</p>
<p slot="two">我是父组件，会替换插槽name为two的内容</p>
</sonSlot>效果：
作用域插槽：简单理解就是子组件传递数据给父组件
子组件testSlot.vue：
<template>
<div class="">
<slot:test="test"></slot>
<slot name="one":one="slotOne"></slot>
</div>
</template>
data() {
return {
test: '我是子组件test数据',
slotOne: '我是子组件slotOne数据'
}
}父组件：
引入import sonSlot from"./testSlot";
注册：components: {sonSlot}
父组件使用：
<sonSlot>
<pslot-scope="tt">{{tt.test}}</p>
<p slot="one"slot-scope="slotOne">我是父组件，插槽name为one的内容{{slotOne.one}}</p>
</sonSlot>效果：
作用域插槽传递数据跟父组件传递给子组件差不多。
（完）
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读