vue插槽
1、具名插槽
具有名字的插槽,使用的时候可以根据名字插入到具体要插入的组件中的相应位置
//子组件(Son)
<div>
<p>这是该组件固定的内容</p>
//留给引用此组件,想要添加自己内容的
<v-slot name='title'></slot>
</div>
//父组件
<Son>
<template v-slot='title'>
//v-slot可以简写为#,#title
//往该组件添加我想加的内容
<h1>我添加的title为:具名插槽的使用</h1>
</template>
</Son>
2、作用域插槽
可以拿到封装组件时绑定的数据,数据类型是一个对象{}
//子组件
<template>
<div>
<p>我是Artical组件</p>
//在封装组件时,为预留的<slot>提供属性对应的值,这种做法,叫做“作用域插槽”
<slot name="title" :user="userList"></slot>
</div>
</template>
<script>
export default {
data() {
return {
userList: {
name: "张三",
age: 22,
sex: "男",
},
};
},
};
</script>
//父组件
<script>
// 引入组件
import Artical from "./components/Artical.vue";
export default {
name: "App",
components: {
Artical
}
</script>
<template>
<div id="app">
<Artical>
<template #title="scope">
<p>{{ scope }}</p>
</template>
</Artical>
</div>
</template>
结果:{ "user": { "name": "张三", "age": 22, "sex": "男" } }
<template>
<div id="app">
<Artical>
<template #title="scope">
<p>{{ scope.user }}</p>
</template>
</Artical>
</div>
</template>
结果:{ "name": "张三", "age": 22, "sex": "男" }
<template>
<div id="app">
<Artical>
<template #title="scope">
<p>{{ scope.user.name }}</p>
</template>
</Artical>
</div>
</template>
结果:张三