vue2和vue3中mixins的使用
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。vue文档——mixin混入Vue2.x 中mixin的使用// mixin.jsexport default{data(){return{}},created() {// do something...},
·
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
Vue2.x 中mixin的使用
// mixin.js
export default{
data(){
return{
}
},
created() {
// do something...
},
methods:{...}
}
// vue页面中引入
import mixin from 'mixin.js'
export default{
data(){},
mixins: [mixin]
}
在mixin定义的方法和值可以在所有引入 mixin.js 的vue页面中调用。
例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
Vue3中mixin的使用
// mixin.js
import { computed, ref } from 'vue'
export default function () {
setup(){
const count = ref(1)
const plusOne = computed(() => count.value + 1)
function hello(){
console.log('hello mixin'+plusOne.value)
}
return{
count,
plusOne,
hello
}
}
}
// vue页面中引入
import mixin from 'mixin.js'
export default{
setup(){
const { count, plusOne, hello } = mixin()
hello()
console.log(count.value, plusOne.value)
}
}
// 调用组件中的局部变量
export default {
setup () {
// 某个局部值的合成函数需要用到
const myLocalVal = ref(0);
// 它必须作为参数显式地传递
const { ... } = mixin(myLocalVal);
}
}
mixin模式表面上看起来很安全。然而,通过合并对象来共享代码,由于它给代码增加了脆弱性,并且掩盖了推理功能的能力,因此成为一种反模式。
Composition API最聪明的部分是,它允许Vue依靠原生JavaScript中内置的保障措施来共享代码,比如将变量传递给函数和模块系统。
更多推荐
已为社区贡献3条内容
所有评论(0)