插槽
插槽内可以包含任何模板代码,包括 HTML,其他组件。
当一个父组件需要传dom元素给子组件可以使用插槽
<template>
<div>
<v-home>
<h1>父组件传的内容</h1>
</v-home>
</div>
</template>
<script>
export default{
components:{
"v-home":{
template:`<div>
<p>子组件</p>
<slot></slot>
</div>`
}
}
}
</script>
这里的<slot></slot>
会被父组件传过来的<h1>父组件传的内容</h1>
替换掉
默认内容:
就是在slot标签之间附上默认内容
我们将子组件的内容换成
"v-home":{
template:`<div>
<p>子组件</p>
<slot>默认内容</slot>
</div>`
}
那么,如果模板里如此写<v-home> </v-home>
,或显示为默认内容。
具名插槽:给插槽起名字,按需引入插槽
<template>
<div>
<v-home>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</v-home>
</div>
</template>
<script>
export default{
components:{
"v-home":{
template:`<div>
<slot name="header"></slot>
<div class="body">body</div>
<slot name="footer"></slot>
</div>`
}
}
}
</script>
作用域插槽
举个例子,当子组件内部需要做循环,但是循环的样式必须有外部决定(<li>{{props.item}}</li>
可以改成<h1>{{props.item}}</h1>
或者其他),那么可以使用作用域插槽。
当父组件调用子组件是,传入的元素必须要由一个template标签包裹,由slot-scope="props"接收子组件循环的数据。
<template>
<div>
<v-home>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</v-home>
</div>
</template>
<script>
export default{
components:{
"v-home":{
data:function(){
return{
list:[1,2,3,4,5]
}
},
template:`<div>
<ul>
<slot v-for="item of list"
:item='item'
></slot>
</ul>
</div>`
}
}
}
</script>
以上代码子组件实际上会编译为(个人理解):
<ul>
<template v-for="item of list">
<li>{{item}}</li>
</template>
</ul>
总结
1、插槽,可以理解为组件标签包裹dom结构或组件,包裹的dom结构或组件会替换在组件内的<slot></slot>
元素。
2、默认内容:插槽可以有默认值<slot>默认内容</slot>
,即使父组件调用子组件时不传入dom结构,会显示slot包裹的默认内容
3、具名插槽:生命slot时带上name特性<slot name="kk"></slot>
,然后在父组件在子组件插入dom结构时,带上slot="kk"特性,如<div class="header" slot="header">header</div>
4、作用域插槽:父组件使用插槽时,可以获取子组件传来的数据,必须使用template包裹dom结构,使用slot-scope获取子组件传过来的数据
子组件: <slot v-for="item of list" :item='item'></slot>
父组件:使用slot-scope="props"获取一个props对象,这个对象包含子组件传过来的数据
<v-home>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</v-home>