在开发中,我们会经常封装一个个可复用的组件:
通过props传递
给组件一些数据,让组件来进行展示;具备更强的通用性
,我们不能将组件中的内容限制为固定的div、span等等这些元素;举个栗子:假如我们定制一个通用的导航组件 - NavBar
左边-中间-右边
,每块区域的内容是不固定;这个时候我们就可以来定义插槽slot:
抽取共性
、预留不同
;如何使用slot呢?
Vue中将元素作为承载分发内容的出口;
在封装组件中,使用特殊的元素就可以为封装组件开启一个插槽;
该插槽插入什么内容取决于父组件如何使用;
有时候我们希望在使用插槽时,如果没有插入对应的内容,那么我们需要显示一个默认的内容:
<template>
<h2>{{ title }}h2>
<div class="content">
<slot>
<p>我是默认内容, 哈哈哈p>
slot>
div>
template>
我们先测试一个知识点:如果一个组件中含有多个插槽,我们插入多个内容时是什么效果?
每个插槽都会获取到我们插入的内容来显示
;我们一个组件MySlotCpn.vue:该组件中有一个插槽,我们可以在插槽中放入需要显示的内容;
我们在App.vue中使用它们:
<template>
<div class="app">
<show-message title="哈哈哈">
<button>我是按钮元素button>
show-message>
<show-message>
<a href="#">百度一下a>
show-message>
<show-message>
<img src="@/img/kobe02.png" alt="">
show-message>
<show-message>show-message>
div>
template>
<script>
import ShowMessage from './ShowMessage.vue'
export default {
components: {
ShowMessage
}
}
script>
<style scoped>
style>
事实上,我们希望达到的效果是插槽对应的显示,这个时候我们就可以使用具名插槽
:
default
;App.vue
<template>
<nav-bar>
<template #left>
<button>{{ leftText }}button>
template>
<template #center>
<span>内容span>
template>
<template v-slot:right>
<a href="#">登录a>
template>
nav-bar>
<nav-bar>
<template v-slot:[position]>
<a href="#">注册a>
template>
nav-bar>
<button @click=" position = 'left' ">左边button>
<button @click=" position = 'center' ">中间button>
<button @click=" position = 'right' ">右边button>
template>
<script>
import NavBar from './NavBar.vue'
export default {
components: {
NavBar
},
data() {
return {
position: "center",
leftText: "返回"
}
}
}
script>
<style scoped>
style>
NavBar.vue
具名插槽使用的时候缩写:
v-slot
也有缩写;#
;<template>
<nav-bar>
<template #left>
<button>{{ leftText }}button>
template>
<template #center>
<span>内容span>
template>
<template v-slot:right>
<a href="#">登录a>
template>
nav-bar>
什么是动态插槽名呢?
v-slot:[dynamicSlotName]
方式动态绑定一个名称;<template>
<my-slot>
<template #[slotName]>
我是随机的内容
template>
my-slot>
template>
<script>
import MySlot from './MySlot.vue';
export default {
data() {
return {
slotName: 'center'
}
},
components: {
MySlot
}
}
script>
在Vue中有渲染作用域的概念:
如何理解这句话呢?我们来看一个案例:
但是有时候我们希望插槽可以访问到子组件中的内容
是非常重要的:
作用域插槽
;我们来看下面的一个案例:
如果我们的插槽是默认插槽default,那么在使用的时候 v-slot:default="slotProps"可以简写为v-slot=“slotProps”:
<tab-control :titles="['衣服', '鞋子', '裤子']"
@tab-item-click="tabItemClick">
<template v-slot="props">
<button>{{ props.item }}button>
template>
tab-control>
并且如果我们的插槽只有默认插槽时,组件的标签可以被当做插槽的模板来使用,这样,我们就可以将 v-slot 直接用在组件上:
<tab-control :titles="['衣服', '鞋子', '裤子']"
@tab-item-click="tabItemClick"
v-slot="props">
<button>{{ props.item }}button>
tab-control>
但是,如果我们有默认插槽和具名插槽,那么按照完整的template来编写。
只要出现多个插槽,请始终为所有的插槽使用完整的基于 的语法
<template>
<div class="app">
<tab-control :titles="['衣服', '鞋子', '裤子']"
@tab-item-click="tabItemClick"/>
<h1>{{ pageContents[currentIndex] }}h1>
<tab-control :titles="['衣服', '鞋子', '裤子']"
@tab-item-click="tabItemClick">
<template v-slot:default="props">
<button>{{ props.item }}button>
template>
tab-control>
<tab-control :titles="['衣服', '鞋子', '裤子']"
@tab-item-click="tabItemClick">
<template #default="props">
<a href="#">{{ props.item }}a>
template>
tab-control>
<tab-control :titles="['衣服', '鞋子', '裤子']"
@tab-item-click="tabItemClick">
<template v-slot="props">
<button>{{ props.item }}button>
template>
tab-control>
<tab-control :titles="['衣服', '鞋子', '裤子']"
@tab-item-click="tabItemClick"
v-slot="props">
<button>{{ props.item }}button>
tab-control>
div>
template>
<script>
import TabControl from './TabControl.vue'
export default {
components: {
TabControl
},
data() {
return {
pageContents: [ "衣服列表", "鞋子列表", "裤子列表" ],
currentIndex: 0
}
},
methods: {
tabItemClick(index) {
console.log("app:", index)
this.currentIndex = index
}
}
}
script>
<style scoped>
style>
TabControl.vue
<template>
<div class="tab-control">
<template v-for="(item, index) in titles" :key="item">
<div class="tab-control-item"
:class="{ active: index === currentIndex }"
@click="itemClick(index)">
<slot :item="item" abc="cba">
<span>{{ item }}span>
slot>
div>
template>
div>
template>
<script>
export default {
props: {
titles: {
type: Array,
default: () => []
}
},
data() {
return {
currentIndex: 0
}
},
emits: ["tabItemClick"],
methods: {
itemClick(index) {
this.currentIndex = index
this.$emit("tabItemClick", index)
}
}
}
script>
<style scoped>
.tab-control {
display: flex;
height: 44px;
line-height: 44px;
text-align: center;
}
.tab-control-item {
flex: 1;
}
.tab-control-item.active {
color: red;
font-weight: 700;
}
.tab-control-item.active span {
border-bottom: 3px solid red;
padding: 8px;
}
style>
在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信。
这里我们主要讲两种方式:
全局事件总线
;Provide/Inject
;Vue3从实例中移除了 $on
、$off
和 $once
方法,所以我们如果希望继续使用全局事件总线,要通过第三方的库:
首先,我们需要先安装这个库:
npm install mitt --save
其次,我们可以封装一个工具eventbus.js:
import mitt from 'mitt'
const emitter = mitt()
export default emitter
在项目中可以使用它们:
App.vue
Banner.vue
Mitt的事件取消
在某些情况下我们可能希望取消掉之前注册的函数监听:
function onFoo() {}
emitter.on('foo', onFoo) // listen
emitter.off('foo', onFoo) // unlisten
Provide/Inject用于非父子组件之间共享数据:
对于这种情况下,我们可以使用 Provide 和 Inject :
实际上,你可以将依赖注入看作是“long range props”,除了:
我们开发一个这样的结构:
如果Provide中提供的一些数据是来自data,那么我们可能会想要通过this来获取:
这个时候会报错:
我们先来验证一个结果:如果我们修改了this.names的内容,那么使用length的子组件会不会是响应式的?
我们会发现对应的子组件中是没有反应的:
修改了names之后
,之前在provide中引入的 this.names.length 本身并不是响应式
的;那么怎么样可以让我们的数据变成响应式的呢?
computed
函数;vue3的新特性
,在后面我会专门讲解,这里大家可以先直接使用一下;注意:我们在使用length的时候需要获取其中的value