插槽
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件=>子组件
默认插槽
App.vue
<Category>
<img src="" alt="">
</Category>
img插入到Category
内
Category.vue
<template>
<div class="category">
<h3>分类</h3>
<slot>当没有插入值的时候,则会出现</slot>
</div>
</template>
那么img
图片就会替换Category.vue
的<slot></slot>
当没有在<Categort></Category>
中插入任何内容,那么在Category.vue
中的<slot></slot>
的内容就会出现
具名插槽
此时我们有两个图片,我们希望将该图片放在Category.vue
的头部和尾部
<Category>
<img src="" alt="">
<img scr="" alt="">
</Category>
<template>
<div class="category">
<slot>当没有插入值的时候,则会出现</slot>
<h3>分类</h3>
<slot>当没有插入值的时候,则会出现</slot>
</div>
</template>
呈现效果及原因:
Vue不会自动把第一张图片放到Category.vue
中的第一个slot
,将第二张图片放在第二个slot
, 相反 , 它会将两张图放在同一个slot
,并且因为有两个slot
,所以在页面中会出现两张图片
所以当插入的内容的希望放在不同的部分的时候,就要使用具名插槽
操作:
- 给插入的元素对外层绑定
slot
属性 - 给组件
slot
插槽,绑定name
属性
注意:元素的slot
属性和组件插槽的name
属性一致
<Category>
<img src="" alt="" slot="header">
<img scr="" alt="" slot="footer">
</Category>
<template>
<div class="category">
<slot name="header">当没有插入值的时候,则会出现</slot>
<h3>分类</h3>
<slot name="footer">当没有插入值的时候,则会出现</slot>
</div>
</template>
那么这样子就可以将两张图片放在放在不同的位置了
但是,当我们一个插槽插入的元素过多,那么在外部就必须要包裹一个<div slot=""></div>
,但是这一个div
是没有必要的,只是为了放入插槽而加上的
其实我们可以使用<template></template>
来代替<div></div>
,这样子就不会在实际代码中出现了
当使用了<template></template>
来包裹元素,那么就有了另一种绑定方式了:
<!--父组件-->
<Category>
<template v-slot:xxx>
<div>
......
</div>
</template>
</Category>
<!--子组件组件-->
<template>
<div class="category">
<h3>分类</h3>
<slot name="xxx"></slot>
</div>
</template>
该方法绑定的注意点:
v-slot
后面是=
v-slot
的属性值不用带引号,否则会报错- 只有
template
才有这一种写法
作用域插槽
个人理解:默认插槽和具名插槽是将内容给子组件,拼接完之后再被父组件调用;但是作用域插件更像是将子组件放在父组件中,子组件的数据被父组件调用
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定
<slot :game="games" :foods="foods" :cars="cars"></slot>
data() {
return {
games:["E","D","G","N","B"]
}
},
在子组件这样子编写,那么传递给父组件的数据为:
{ "game": [ "E", "D", "G", "N", "B" ], "foods": "bread", "cars": "toyota" }
结论:
在子组件的
slot
编写属性,最后 属性名=>键 属性值=>值当传递的数据不是一个字符串(变量,对象,数组)等,我们需要给绑定属性,才能方式 值 变成字符串
<Category>
<template slot-scope="data" >
{{data}}
</template>
</Category>
父组件使用slot-scope
来获取子组件传递的数据,此处的data
就是传递过来的数据
data = { "game": [ "E", "D", "G", "N", "B" ], "foods": "bread", "cars": "toyota" }
那么我们就可以使用data
来编写代码了