vue使用插槽slot整理
插槽
插槽相当于一个占位符，当没有内容传递过去的时候会显示插槽的内容，有内容时不会显示插槽的内容
作用域插槽
子组件的插槽传递数据给父组件
父组件
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>
<!-- 作用域插槽：子组件的插槽传递数据给父组件
父组件 v-slot:default = <插槽数据的变量名>,这个自定义的变量名实际是通过一个参数传递到函数中，可以通过解构来简化语法： v-slot:default = "{插槽数据的对象名}" -->
<template v-slot:default="{userInfo}">
{{userInfo.name + '-' + userInfo.age}}
</template>
<!-- 具名插槽
在父组件中使用具名插槽时，把要插入的内容放置在template节点
使用v-slot:<插槽的name值> 绑定插槽
v-slot语法糖：# -->
<template #h3="{h3Msg}">
{{h3Msg}}
</template>
</HelloWorld>
</div>
</template>
<script>
// @ is an alias to /src
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>
<!-- 具名插槽
一个组件中可以使用多个插槽,为了区分每一个插槽可以通过`name`属性设置名字
在子组件既有具名插槽又有默认插槽时，如果父组件不使用v-slot绑定插槽，会把所有的内容都插入在默认插槽 -->
<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>
