vue插槽slot

默认插槽slot: 就是没有名字（name）的插槽
代码如下,

import Vue from 'vue'
const comn={
template:`
<div :style='style'>
<div>
<slot></slot>
</div>
</div>
`,
data(){
return{
style:{
width:'200px',
height:'200px',
border:'1px solid red'
},
value:456
}
}
}
new Vue({
components:{
comOne:comn,
},
el:'#test',
template:`<com-one>
<span>this is default slot</span>
</com-one>`,
data(){
return {
value:123
}
}
})

具名插槽slot: 就是给这个插槽起个名字，即有名字的插槽

import Vue from 'vue'
const comn={
template:`
<div :style='style'>
<div>
<slot name="header"></slot>
</div>
<div>
<slot name="body"></slot>
</div>
</div>
`,
data(){
return{
style:{
width:'200px',
height:'200px',
border:'1px solid red'
},
value:456
}
}
}
new Vue({
components:{
comOne:comn,
},
el:'#test',
template:`<com-one>
<span slot="header">this is header</span>
<span slot="body">this is content</span>
</com-one>`,
data(){
return {
value:123
}
}
})

作用域插槽slot-scope: 在组件上的属性，可以在组件元素内使用！
如下代码中aaa和bbb的值就是组件上的属性，slot-scope就是组件元素内的使用属性，它的值是一个对象

import Vue from 'vue'
const comn={
template:`
<div :style='style'>
<slot aaa="values" bbb="777"></slot>
</div>
`,
data(){
return{
style:{
width:'200px',
height:'200px',
border:'1px solid red'
},
values:456
}
}
}
new Vue({
components:{
comOne:comn,
},
el:'#test',
template:`<com-one>
<span slot-scope='props'>{{props.aaa}}{{props.bbb}}</span>
</com-one>`,
data(){
return {
value:123
}
}
})