动态组件指的是动态切换组件的显示与隐藏
vue 提供了一个内置的
组件,专门用来实现动态组件的渲染
使用 keep-alive 保持状态
默认情况下,切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的
组件保持动态组件的状态。
keep-alive 对应的生命周期函数
当组件被缓存
时,会自动触发组件的 deactivated
生命周期函数
当组件被激活
时,会自动触发组件的 activated
生命周期函数
keep-alive 的 include 属性
include 属性用来指定:只有名称匹配的组件
会被缓存。多个组件名之间使用英文的逗号分隔
扩展:keep-alive 的 exclude 属性,表示不被缓存(和 include不可以同时使用)
<keep-alive include="Left,Right"> //同时缓存Left,Right
<keep-alive include="Left"> //只缓存Left
<keep-alive exclude="Right"> //不缓存Right
// App.vue文件内容
<template>
<div class="app-container">
<h1>App 根组件</h1>
<button @click="comName = 'Left'">展示Left</button>
<button @click="comName = 'Right'">展示Right</button>
<div class="box">
// 渲染 Left 组件和 Right 组件
// component标签是vue内置的,作用就是:组件的占位符
// is属性的值:表示要渲染的组件名字
// is属性的值:应该是组件在 component 节点下的注册名称
// keep-alive 可以把内部的组件进行缓存,而不是销毁组件 -
<keep-alive include="Left,Right">
<component v-bind:is="comName"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";
export default {
data() {
return {
//comName表示要展示的组件名字
comName: "Left",
};
},
components: {
Left,
Right,
},
};
</script>
<style lang="less">
</style>
提示: 作为初学者很少在实际开发中用到插槽,因为一般都是封装组件的人会用到插槽,初学者会使用插槽、看得懂代码即可,不用自己去封装。
在封装组件时,可以通过
,从而为用户预留内容占位符
插槽
,则用户提供的任何自定义内容都会被丢弃
插槽提供后备内容(默认内容)
。如果组件的使用者没有为插槽提供任何内容,则后备内容会生效如果在封装组件时需要预留多个插槽节点
,则需要为每个
; 这种带有具体名称的插槽叫做 “具名插槽”
注意:vue官方规定每个插槽都要有一个name属性,没有指定 name 名称的插槽, 默认名称叫做 “default”
元素上使用 v-slot 指令
,并以 v-slot 的参数的形式提供其名称(v-slot:)
替换为字符 #
。例如 v-slot:header 可以被重写为 #header<Left>
<!--默认情况:使用组件时候,提供的内容都会被填充到名字为default的插槽中
如果想要指名道姓使用哪个插槽,需要用template v-slot:插槽名字
template是虚拟的标签,只起到包裹性质,不会被渲染成什么实质性元素 -->
<template v-slot:default>
<template #default>
<p>这是在 Left组件的内容区域声明的p标签</p>
</template>
</Left>
在封装组件时,可以为预留的
提供属性对应的值,这种用法叫做:作用域插槽
(在预留插槽的时候声明一些数据项,在使用插槽的时候可以接收数据并使用)
要求:要能够读懂别人写的解构插槽代码
// App.vue内容
<template #content="scope"> // 接收作用域插槽的时候用等号=接收,并且名字叫做scope,意思是作用域 ,这里scope包含两个属性分别是 msg 和 user
<template #content="{ msg, user }"> //这里用到了解构赋值
<div>
<p>啊大海全是水</p>
<p>啊啊大海全是水</p>
<p>啊啊啊大海全是水</p>
<p>{{ scope }}</p> //{ "msg": "hello vue.js", "user": { "name": "zs", "age": 18 } }
<p>{{ msg }}</p> // hello vue.js
<p>{{ user.age }}</p> // 18
</div>
</template>
// 子组件内容
<template>
<div class="content-box">
<slot name="content" msg="hello vue.js" :user="userinfo"></slot>
</div>
</template>
<script>
export default {
data() {
return {
userinfo: {
name: "zs",
age: 18
}
}
}
}
</script >
vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令
vue 中的自定义指令分为两类,分别是:
⚫ 私有
自定义指令
⚫ 全局
自定义指令
全局共享的自定义指令需要通过 Vue.directive()
进行声明; 全局自定义指令以后用的多
//全局自定义指令 写在main.js文件里面
Vue.directive('maincolor', {
bind(el, binding) {
el.style.color = binding.value
},
update(el, binding) {
el.style.color = binding.value
}
})
// 简写形式
Vue.directive('maincolor', function (el, binding) {
el.style.color = binding.value
})
directives
节点下声明私有自定义指令(bind)v- 前缀
=
的方式,为当前指令动态绑定参数值binding
获取指令的参数值update
函数当 DOM 更新时 bind 函数不会被触发
;update 函数会在每次 DOM 更新时被调用// 在使用自定义指令时,需要加上 v- 前缀
// v-color指令所绑定到的那个 DOM 对象就是 h1 和 h3
<h1 v-color='color'>App 根组件</h1> // blue 这里的color是变量
<h3 v-color="'green'">测试文本</h3> // green 这里的'green'是字符串
<button @click="color = 'pink'">改变颜色</button> // 测试文本会变成粉色
export default {
data() {
return {
color: "blue",
}
},
//私有自定义指令的节点
directives: {
//定义名为color的自定义指令,指向一个配置对象
color: {
//当指令第一次被绑定到元素上的时候,会立即触发bind函数
//形参中的 el 表示当前指令所绑定到的那个 DOM 对象
bind(el, binding) {
console.log("触发了v-color的bind函数");
// el.style.color = "pink";
console.log(binding);
el.style.color = binding.value;
},
// DOM更新的时候会调用 update函数
update(el, binding) {
console.log("触发了v-color的update函数");
console.log(binding);
el.style.color = binding.value;
},
}
// 简写形式 对象格式的自定义指令可以简写成函数格式
color(el, binding) {
el.style.color = binding.value;
},
},
}