版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
组件插槽
作用
父组件向子组件传递内容
基本用法
- 插槽位置
Vue.component('alert-box',{
template:`
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>//这就是插槽
</div>
`
})
- 插槽内容
Something bad happened.
Something bad happened.这个内容就会显示在插槽中,
如果在默认内容没有传递数据,那么就显示默认内容,传递了就显示传递的内容 - 具名插槽定义 就是有名字的插槽
定义
内容<slot name="header"></slot>
没有名称的话就匹配到没有name属性的插槽中<h1 solt="header">内容</h1>
还可以使用template标签进行使用
template只是暂时包裹要显示的内容,可以包裹多个,它不会显示在页面中
使用两个相同具有相同名称的slot可以显示在页面中 name这个有什么用??? - 作用域插槽
应用场景:父组件对子组件的内容进行加工处理- 插槽定义
v-bind:item绑定的数据是要给父组件用的<ul> <li v-for="item in list" v-bind:key="item.id"> <slot v-bind:item="item"> {{item.name}} </slot> </li> </ul>
- 插槽内容
v-bind:list="list"是为了让子组件可以使用父组件中的值 子组件中有props[‘list’]
slot-scope可以得到子组件中绑定属性的那个数据<fruit-list v-bind:list="list"> <template slot-scope="soltProps"> <strong v-if="slotProps.item.current"> {{slotProps.item.text}} </strong> </template> </fruit-list>
//插槽(匿名插槽) 只需要传递一块内容
//具名
- 插槽定义
作用域插槽
- 还是插槽
- 插槽中要使用变量数据
- 变量数据来自于子组件内部
<slot a=100></slot>
<template slot-scope="scope">{{scope.a}}</template>