<slot></slot> 插槽:
1.个人理解:组件中,如果我们不使用插槽slot元素,那么我们在组件中放入任何元素或内容都是不会显示,也就是说放入的元素会被抛弃;使用插槽slot可以向组件内部制定位置传递内容;也就是说<slot>显示不现实以及如何显示是父组件来决定的.
2.分类
2.1 "单个插槽"又叫"匿名插槽"或"默认插槽"
该插槽可以放到组件的任意位置,但是只能放一个;举例如下
父组件:
<template>
<div class="fu">
<p>这个是父组件</p>
<zi>
<div>
<p>语文</p>
</div>
</zi>
</div>
</template>
子组件:
<template>
<div class="zi">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
最终显示结果是:
这个是父组件
这里是子组件
语文
PS:这里如果吧子组件里面的slot删除掉,那么就只能看到
这个是父组件
这里是子组件
2.2 具名插槽
有些时候我们需要多个插槽。但是我们又希望可以找到对应的插槽,官方给我们提供了一个<slot>元素特有的属性name;就是找到对应的插槽以免位置错乱.
<div class="container">
- <header>
- <slot name="header"></slot>
- </header>
- <main>
- <slot></slot>//保留一个未命名插槽,这个插槽是默认插槽,也就是说它会作为所有未匹配到插槽的内容的统一出口
- </main>
- <footer>
- <slot name="footer"></slot>
- </footer>
- </div>
- 个人理解为其实就是使用了name给slot确定了位置,父组件中使用的时候,只要name对应上就可以了.
- <slot name="header"></slot>
- 下面说下,作用域插槽 或者说是 带数据的插槽
- PS:作用域插槽,是子组件传递数据给父组件,父组件只用来决定如何展示.
- 作用域插槽要求,在slot上面绑定数据,如下所示
- <slot name="zuoyongyu" :data="data"></slot>
-
export default {
data: function(){
return {
data: [1,2,3,4,5];
}
},
}
-
-
子组件
-
<template>
<div class="zi">
<h3>这是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: [1,2,3,4,5];
}
}
}
-
使用
<template>
<div class="fu">
<h3>这是父组件</h3>
<!--首先是flex布局展示-->
<child>
<!-- 将 `user` 定义为插槽作用域的名字,这里叫什么都可以,都是通过 slot-scope
特性从子组件获取数据: -->
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
<!--第二次使用:用列表展示数据-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template>
</child>
</div>
</template>