标签：ret 作用 标签 list highlight com ops dell 接收
作用：当子组件需要展示更具父组件的dom传来的值，可以用插槽 ，
父组件优雅的向子组件传递dom
具名插槽
父组件：slot="xxx"是
子组件： <slot name="xxx"></slot>
<child>
<p slot="name">dell</p>
<p slot="hi">good night</p>
</child>
Vue.component(‘child‘,{
props:[‘content‘],
template:`<div>
<p>hello</p>
<slot name="name"></slot>
<div>---------------</div>
<slot name="hi"></slot>
</div>`,
})
作用域插槽
父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式
slot-scope="props"
<hello >
<template slot-scope="props">
<li>{{props.item}}</li><--!定义使用渲染方式-->
</template>
</hello>
<hello >
<template slot-scope="props">
<li>{{props.item}}</li><--!定义使用另一种渲染方式-->
</template>
</hello>
Vue.component(‘hello‘,{ data:function(){ return { list:[1,2,3,4], } }, template:`<div><ul><slot v-for="item in list" :item=item></slot></ul></div>` })
标签：ret 作用 标签 list highlight com ops dell 接收
原文地址：https://www.cnblogs.com/yubaibai/p/10713893.html
