1.混入 (mixins)
混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
①与vuex的区别
vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。
②与公共组件的区别
组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。
Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。
参考地址:
https://www.jianshu.com/p/bcff647d24ec
2.具名插槽
父组件:
<template v-slot:slotA>
//父组件中设置内容会替换子组件插槽内的值
</template>
子组件:
<div>
<slot name="slotA">555</slot>
</div>
3.watch其他属性
https://www.cnblogs.com/forward-wuyi/p/9627962.html
watch中的immediate、handler和deep属性
(1)immediate和handler
这样使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
watch: {
docData: {
handler(newVal) {
this.change_number++
},
immediate: true
}
}
(2)deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。
data() {
return {
docData: {
'doc_id': 1,
'tpl_data': 'abc'
}
}
},
watch: {
docData: {
handler(newVal) {
this.change_number++
},
deep: true
}
}
设置deep:true则可以监听到docData.doc_id的变化,此时会给docData的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
data() {
return {
docData: {
'doc_id': 1,
'tpl_data': 'abc'
}
}
},
watch: {
'docData.doc_id': {
handler(newVal, oldVal) {
......
},
deep: true
}
}
总结:
数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。