目录
一、动态组件
component标签动态切换组件,使用is属性切换组件
diff
<!-- 使用component动态切换组件 is属性 组件名称 -->
<component v-bind:is="current"></component>
使用component切换组件,组件会不停的创建和销毁,如果想在第一次创建时候缓存组件,可以使用keep-alive包裹
diff
<!-- keep-alive作用: 希望第一次创建组件时候被缓存 后续切换不会重新创建和销毁 -->
<keep-alive>
<component v-bind:is="current"></component>
</keep-alive>
与keep-alive相关生命周期:
activated 使用keep-alive缓存的组件激活(进入)的时候触发
diff
activated(){
console.log('被keep-alive缓存的组件激活的时候触发 进入组件时触发');
},
deactivated 使用keep-alive缓存的组件失活(离开)的时候触发
diff
deactivated(){
console.log('被kepp-alive缓存的组件失活的时候触发 离开组件的时候触发');
},
errorCaptured 捕获后代组件错误 error(错误对象),vm(发生错误的组件),info(错误提示字符串)
diff
// 捕获后代组件发生错误时触发
errorCaptured(err, vm, info){
console.log(err,'发生错误');
console.log(vm,'发生错误组件');
console.log(info,'字符串信息提示');
},
二、混入
分为Vue可复用的功能,可以对数据和对象选项进行混入,接收组件任意选项。
全局混入:
全局混入对象会影响到每一个组件,谨慎使用。
diff
// 混入对象配置项 混入作用: 分发Vue的可复用功能
let myMixin = {
data() {
return {
mixinData:'我是混入对象的数据',
msg:'我是混入对象的msg'
}
},
created(){
console.log('我是混入对象的生命周期');
},
beforeMount(){
console.log('beforeMount');
},
methods: {
foo(){
return this.mixinData
},
bar(){
console.log('我是混入对象的bar方法');
}
},
}
// 全局混入 会把混入对象混入到每一个组件中 影响每一个组件 谨慎使用
Vue.mixin(myMixin);
局部混入:
mixins:[mixin]
diff
// 局部混入 只会合并到当前的实例组件中
mixins:[myMixin],
混入规则:
1.data选项会进行合并,如果data数据发生冲突,会保留组件内的数据。
2.生命周期(钩子函数)会被合并到一个数组并依次调用,混入对象的生命周期先调用。
3.值为对象选项(methods,computed,watch,directive)也会合并到一个对象中,如果对象键冲突保留组件内的键值对。