先说一下个人理解:vue页面的组成主要靠父子组件的组合,而父子组件之间内容和消息的传递主要靠的是slot props emit等实现。
从子组件向不向slot中传递数据的角度来看,插槽主要分为不带数据的插槽和带数据的插槽,而不带数据的插槽又可以分为匿名插槽/单个插槽/默认插槽和具名插槽的,当然带数据的插槽同样也可以分为上面两种插槽。
- 不带数据的插槽
- 匿名插槽/默认插槽/单个插槽
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<template class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</template>
</child>
</div>
</template>
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
这类插槽子组件中只能有一个,多了会报以下duplicate presence重复存在的错误。以上例子中的slot标签负责将父组件中的内容传递到子组件中来。
- 具名插槽
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<template class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</template>
</child>
</div>
</template>
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot name="up"></slot>
</div>
</template>
这类插槽子组件中可以有多个,通过name来进行区分。
- 带数据的插槽(作用域插槽)
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
</div>
</template>
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot :data="data"></slot>
</div>
</template>
<script>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
</script>
这里以匿名插槽为例,对于这类带数据的插槽,父组件通过slot-scope来获取子组件中传递过来的数据,从而实现了父组件仅可以控制子组件插槽中的结构,而其中的内容由父子组件共同决定。
总结: 父子组件的组合实现了页面的模块化,而slot/props/emit等实现了各个模块之间内容和消息的传递,具体通过何种方式,内容分发?这个以后再深入思考。通过slot,父组件实现了对子组件插槽结构的控制,而内容则由父子组件共同决定。
参考:https://juejin.im/post/5a69ece0f265da3e5a5777ed#comment
备注:vue2.6.0版本及之后版本slot-scope被v-slot指令取代,用法类似。