- 插槽内容(能够放任何货色),在组件加 <slot></slot>
示例:Vue.component('child',{
template:`
<div>
Hello,World!
<slot></slot>
</div>
`
})
组件:给组件命名,aaa,bbb
Vue.component('child-component',{
template:` <div>
<h4> 具名插槽组件 </h4>
<slot name="aaa"></slot>
<div ></div>
<slot name="bbb"></slot>
<div ></div>
<slot></slot>
</div>
`
})
应用:<div id="app">
<child>
<template slot="aaa">
aaa
</template>
<template slot="bbb">
bbb
</template>
<div> 你谁啊,我是默认的插槽啊 </div>
</child>
</div>
在 <slot></slot> 元素上定义一个属性 work,应用组件 child,在组件内 template 元素增加属性 slot-scope 命名为 setWork
组件定义:Vue.component('child',{
template:` <div>
<slot work="你好"></slot>
</div>
`
})
应用:<div id="app">
<child>
<template slot-scope="setWork">
<!-- {"work":"你好,你在哪里工作"} -->
{{setWork}}
</template>
</child>
</div>