vue-混入mixins

2024-04-02 17:57:28

简单介绍

分发Vue组件中的可复用功能。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。(简单的来说就是两个组件合并为一个组件，A混入B形成了全新的组件C)

单纯组件引用：父组件+子组件 => 父组件 + 子组件
混入mixins：父组件+子组件 => new 父组件（data、methods等方法合并，相当于扩充了父组件的各种属性）
注意：在使用mixins时，父子组件同时拥有子组件的各种属性方法，但是他们不会共享处理变量，除了合并，没有任何通信。

选项合并

(1) 钩子函数合并：同名钩子函数将混合为一个数组，因此都将被调用。但是混入对象的钩子函数在组件自身钩子函数之前调用。

const myMixins = {created() {console.log('hello myMixins');}
}const app = Vue.createApp({mixins: [myMixins],created() {console.log('hello myApp');}}).mount('#app');// 先后输出：hello myMixins  hello myApp

(2) 数据对象合并：data选项中同名数据对象会进行递归合并，并在发生冲突时以组件数据优先。

const myMixins = {data() {return {message: 'hello myMixins',foo: 'aaa'}}
}const app = Vue.createApp({mixins: [myMixins],data() {return {message: 'hello app',bar: 'bbb'}}
}).mount('#app');// 输出data为：{ message: "hello app", foo: "aaa", bar: "bbb" }

(3) 当值为对象的选项，比如methods、components、directives，将被合并为同一个对象。两个对象键名冲突，取组件对象的键值对

const myMixins = {methods: {foo() {console.log('mixins');}}
}const app = Vue.createApp({mixins: [myMixins],methods: {foo() {console.log('app self');}}
}).mount('#app');app.foo() // app self

局部混入

在相应文件夹建立mixins.js文件，里面写公共复用代码，然后在组件中直接引入设置mixins

全局混入

app.mixins 使用要格外小心，一旦使用全局混入，将影响每一个之后创建的组件

vue-混入mixins相关推荐

Vue混入mixins
Vue官网上介绍: 混入(mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 虽然平 ...
Vue混入mixins，让你减少一半代码
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能. 一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组 ...
vue中mixins的使用方法和注意地方
一.什么是Mixins? mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如dat ...
vue 混入对象_特性和混入不是面向对象的
vue 混入对象让我立刻说,我们将在这里讨论的功能是那些迫切需要进行放线手术的人带给面向对象编程的纯粹的毒药 ,就像David West在他的< Object Thinking>一书中所 ...
vue 中 mixins 的使用
本文同步发布在:vue 中 mixins 的使用 mixins(混入)就是定义了一部分公共的方法.计算属性或者钩子函数等 vue 组件中的可复用功能,然后混合进各个组件中使用.下面我们具体来看看怎么使 ...
【Vue】Vue中mixins的使用方法及实际项目应用详解
文章目录 (1)mixin基础 (2)mixin特点 1.选项合并 2.方法和参数在各组件中不共享 (3)mixin与vuex的区别 (4)mixin与公共组件的区别 (5)项目实践 (6)总结 (1 ...
Element组件引发的Vue中mixins使用，写出高复用组件
我们都知道 Vue 采用的是一种组件化开发模式,组件在 Vue 中一个非常重要的核心概念.每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子.所以你会发 ...
vue中Mixins 与 Hoc
什么是mixins 在官方文档中混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身 ...
vue中mixins的使用方法
参考官网以及网上的一些资料,最基本的用法混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项 ...
Vue之mixins
混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. (通俗:当A面使用了a ...

最新文章

热门文章