Vue-组件插槽使用了解
组件的插槽是为了让我们封装的组件更加具有扩展性.让使用者可以决定组件内部可以展示那些内容.
1.普通插槽(匿名插槽)
在默认情况下,我们在使用组件时,若是在组件中嵌套入其他内容,则是无效的,并不会显示出来.若想使得我们在组件中嵌套入的内容能够正常生效显示,这就需要使用组件插槽功能
默认情况下:
<组件名>
...嵌套的文字/元素/变量/表达式等
</组件名>
以上嵌套在默认情况下只会显示组件功能模板中的内容,嵌套在组件间的内容都不会起作用(不显示)
对于插槽的使用声明,我们通过
语法:
<template id="cpnC">
<div>
<h3>
组件功能模板
</h3>
...
<slot></slot> // 开启插槽功能
</div>
</template>
// 在使用组件时,就可以支持嵌套了
<组件名>
文字/元素/变量/表达式等(嵌套的内容必须有同一个父容器)
</组件名>
案例:
<div id="app">
<!-- 使用组件 -->
<Cpn><h3>我是嵌套的内容</h3></Cpn>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 组件功能模板 -->
<template id="tempCpn">
<div>
<!-- 组件实现功能 -->
<ul>
<li v-for="item in books" @click="handleClick">{{item.name}}</li>
</ul>
<!-- 开启插槽功能 -->
<slot></slot>
</div>
</template>
2.具名插槽
具名插槽即为插槽添加一个标记,只有符合标记的内容才能真正生效.
具名插槽的使用通过添加属性name与v-slot指令实现.然而我们需要注意的是:v-slot指令只能在template标签元素上使用
实现步骤
(1)在组件功能实现模板中预留具名插槽位置
<template id="tempCpn">
.....组件功能模板
<slot name="自定义插槽名称"></slot> // 预留插槽位置
</template>
(2)在使用组件时通过template标签与v-slot属性相结合实现插槽功能
<组件名称>
<template v-slot:步骤一中自定义插槽名称>
...具名插槽实现功能
</template>
</组件名称>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<Cpn>
<!-- 使用具名插槽 -->
<template v-slot:left>
<div>图标</div>
</template>
<template v-slot:content>
<div><input type="text" /></div>
</template>
<template v-slot:right>
<div>图标</div>
</template>
</Cpn>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<template id="tempCpn">
<div class="container">
<!-- <p>{{title}}</p> -->
<!-- 声明具名插槽 -->
<slot name="left"></slot>
<slot name="content"></slot>
<slot name="right"></slot>
</div>
</template>
<script>
const Cpn = Vue.extend({
template: "#tempCpn",
data() {
return {
title: "Tabbar",
};
},
});
const app = new Vue({
el: "#app",
data: {},
methods: {},
computed: {},
components: { // 组件挂载
Cpn,
},
});
</script>
</body>
</html>
3.作用域插槽
有时候,我们想要在插槽中使用子组件的数据来进行渲染.然而父组件不能直接使用子组件中的数据.因为数据存在作用域.因此我们需要使用作用域插槽.
1.对于普通插槽(匿名插槽)使用作用域插槽.
对于普通插槽使用作用域插槽,我们可以很简单实现.
实现步骤:
(1)在组件功能模板中预留一个普通插槽(匿名插槽),在该普通插槽(匿名插槽)上通过v-bind属性绑定子组件中的数据
语法:
<slot v-bind:子组件数据名="子组件数据名"></slot>
(2)在使用组件时,在组件标签上通过v-slot属性进行绑定
语法:
<组件名 v-slot="{步骤一子组件数据名}">{{数据使用}}</组件名字>
案例:
<body>
<div id="app">
<!-- 使用组件,通过v-slot属性获取子组件数据 -->
<Cpn v-slot="{user}">{{user.name}} </Cpn>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<template id="tempCpn">
<div class="container">
<!-- 通过v-bind属性在slot标签上绑定组件中的数据 -->
<slot v-bind:user="user">{{user.age}}</slot>
</div>
</template>
<script>
const Cpn = Vue.extend({
template: "#tempCpn",
data() {
return { // 组件数据
user: {
name: "老王",
age: 19,
address: "上海",
},
};
},
});
const app = new Vue({
el: "#app",
data: {},
methods: {},
computed: {},
components: {
// 组件挂载
Cpn,
},
});
</script>
</body>
2.对于具名插槽使用作用域插槽.
具名插槽的作用域数据使用与普通插槽相似,区别在于我们在组件中使用v-slot属性绑定数据时需要指定插槽名称.
实现步骤:
(1)在组件功能模板中预留一个具名插槽,在该具名插槽上通过v-bind属性绑定子组件中的数据
语法:
<slot name="自定义插槽名" v-bind:子组件数据名="子组件数据名"></slot>
(2)在使用组件时,在嵌套的template标签上通过v-slot属性进行绑定
语法:
<组件名>
<template v-slot:步骤一插槽名="{步骤一子组件数据名}">{{数据使用}}</template>
</组件名>
案例:
<body>
<div id="app">
<!-- 使用组件,在嵌套template标签中通过v-slot属性获取子组件数据 -->
<Cpn><template v-slot:userinfo="{user}">{{user.name}}</template></Cpn>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<template id="tempCpn">
<div class="container">
<!-- 通过v-bind属性在slot标签上绑定组件中的数据 -->
<slot v-bind:user="user" name="userinfo">{{user.age}}</slot>
</div>
</template>
<script>
const Cpn = Vue.extend({
template: "#tempCpn",
data() {
return {
// 组件数据
user: {
name: "老王",
age: 19,
address: "上海",
},
};
},
});
const app = new Vue({
el: "#app",
data: {},
methods: {},
computed: {},
components: {
// 组件挂载
Cpn,
},
});
</script>
</body>
