1.动态组件
多个组件使用同一个挂载点,并动态切换,就是动态组件;
vue内置component组件,配合is属性,设置要显示的组件名字
需求:完成一个注册功能页面,2个按钮切换,一个填写注册信息一个填写用户信息
1.data中定义变量来存储显示的组件名;
2.设置挂载点,使用is属性来设置要显示那个组件;
3.点击按钮-修改变量的值 切换组件名;
<template>
<div>
<button @click="comname = 'UserName'">账号密码填写</button>
<button @click="comname = 'UserInfo'">个人信息填写</button>
<div style="border: 1px solid #333">
<component :is="comname"></component>
</div>
</div>
</template>
<script>
import UserName from "@/components/UserName.vue";
import UserInfo from "@/components/UserInfo.vue";
export default {
components: { UserName, UserInfo },
data() {
return {
comname: "UserName", //用来存储组件名
};
},
};
</script>
<style scoped>
</style>
2.组件缓存
组件切换回导致组件被频繁的销毁和创建,性能不高;
使用vue内置的keep-alive组件,可以让包裹的组件保存在内存中不被销毁
补充生命周期
activated 激活; deactived 失去激活状态
总结:keep-alive可以提高组件的性能,内部包裹的标签不会被销毁和重新创建,触发激活和非激活的生命周期方法
3.组件插槽
实现组件的内容分发,通过slot标签,可以接收到写在组件标签内的内容;
vue提供组件插槽的能力,允许开发者在封装组件时,把不确定的部分定义为插槽;
插槽默认内容:
如果外面不给传,想给个默认显示内容
<slot>默认内容</slot>
4.具名插槽
一个组件内有2处以上需要传入标签的地方;
传入的标签可以分别 派发给不同的slot位置;
使用template标签,template不会渲染到页面上,v-slot
5.作用域插槽
子组件里的值,在给插槽赋值时在父组件环境下使用;
1.子组件,在slot上绑定属性和组件内的值;
2.使用组件,传入自定义标签,使用template和v-slot:名字=”自定义变量名“;
3.scope变量名自动绑定slot上所有的属性和值;
封装组件
封装一个表格组件,在表格组件内循环产生单元格
1.准备MyTable.vue组件- 内置表格,传入数组循环铺设页面,把对象每个内容显示单元格里;
2.准备UserTable组件 准备数据传入给MyTable.vue使用;
3.在MyTable.vue中准备占位slot,外面需要把图片地址赋予给src属性,所以在slot上把obj数据绑定;
6.自定义指令
https://cn.vuejs.org/v2/guide/custom-directive.html
vue除了内置的指令(v-model,v-for…),vue也允许注册自定义指令, v-xxxx;
你需要对普通的Dom元素进行底层操作,就会用到自定义指令;
注册
获取标签,扩展额外的功能
局部注册和使用
UseDirective.vue 只能在当前组件中使用;
<template>
<div>
<input type="text" v-focus />
</div>
</template>
<script>
// 创建自定义指令
// inserted指令所在标签被插入到网页上触发(一次)
export default {
data() {
return {
colorStr: "red",
};
},
directives: {
focus: {
inserted(e) {
console.log(e, 9);
e.focus();
},
},
},
};
</script>
<style scoped>
</style>
全局注册
main.js中用Vue.directive方法来注册,任何一个组件里都可以使用
// 全局指令
Vue.directive(‘gfocus’, {
inserted (e) {
e.focus()
}
})
自定义指令传参
使用自定义指令 传入一个值;
需求:定义color指令,传入一个颜色,给标签设置文字颜色
<template>
<div>
<input type="text" v-focus />
<p v-color="colorStr" @click="colorStr = 'blue'">修改文字颜色</p>
</div>
</template>
<script>
// 创建自定义指令
// inserted指令所在标签被插入到网页上触发(一次)
export default {
data() {
return {
colorStr: "red",
};
},
directives: {
focus: {
inserted(e) {
console.log(e, 9);
e.focus();
},
},
color: {
inserted(e, bindling) {
e.style.color = bindling.value;
},
update(e, bindling) {
e.style.color = bindling.value;
},
},
},
};
</script>
<style scoped>
</style>