插槽
- 插槽相当于一个占位符,当没有内容传递过去的时候会显示插槽的内容,有内容时不会显示插槽的内容
作用域插槽
- 子组件的插槽传递数据给父组件
- 父组件
v-slot:default = <插槽数据的变量名>
,这个自定义的变量名实际是通过一个参数传递到函数中,可以通过解构来简化语法: v-slot:default = "{插槽数据的对象名}"
- 子组件
<slot :插槽数据的变量名=<要传递的数据变量名></slot>
具名插槽
- 一个组件中可以使用多个插槽,为了区分每一个插槽可以通过
name
属性设置名字
- 在父组件中使用具名插槽时,把要插入的内容放置在template节点
- 使用v-slot:<插槽的name值> 绑定插槽
- v-slot语法糖:#
- 在子组件既有具名插槽又有默认插槽时,如果父组件不使用v-slot绑定插槽,会把所有的内容都插入在默认插槽
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld>
<template v-slot:default="{userInfo}">
{{userInfo.name + '-' + userInfo.age}}
</template>
<template #h3="{h3Msg}">
{{h3Msg}}
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
},
data() {
return {
msg: 'Welcome to Your Vue.js App',
}
},
}
</script>
<template>
<div class="hello">
<h1>
<slot :userInfo="userInfo">{{ msg }}</slot>
</h1>
<h3>
<slot name="h3" :h3Msg="h3Msg"></slot>
</h3>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'default msg',
userInfo: {
name: 'Lily',
age: 23
},
h3Msg: "h3 msg"
}
}
}
</script>