<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
</div>
</child>
</div>
</template>
<template>
<div class="child">
<h3>这里是子组件</h3>
</div>
</template>
看上面的代码,父模板里面显示子模板 ,显示结果是不会显示菜单1 菜单2 的. 那如果想在子模板里面显示菜单1 菜单2 该怎么办了呢?
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
添加slot 插槽,这就是slot 存在的意义.
插槽分为 匿名插槽,具名插槽,作用域插槽.
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
作用域插槽
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
什么时候该用哪个插槽? 这个主要看父模板里面想怎么用了.
这是具名插槽的用法,通过名字可以指定想插入哪个位置
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜单1</span>
</div>
</child>
</div>
</template>
<template>
<div class="child">
// 具名插槽
<slot name="up"></slot>
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
这是作用域插槽,父模板可以获取子模板里面的数据.
<template>
<div class="father">
<h3>这里是父组件</h3>
<!--第一次使用：用flex展示数据-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
</div>
<template>
