vue mixin指的是什么

这篇文章主要介绍vue mixin指的是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

vue mixin是一种分vue组发件中可复用功能的非常灵活的方式,混合对象可以包含任意组件选项,当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。

<强> mixin

混合(混合)是一种分vue组发件中可复用功能的非常灵活的方式。

混合对象可以包含任意组件选项。

当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。

<强> mixin理解

组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件道具过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。

而mixin则是在引入组件之后,则是将组件内部的内容如数据等方法,方法等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。

单纯组件引用:

父组件+子组件祝辞祝辞祝辞父组件+子组件

mixin:

父组件+子组件祝辞祝辞祝辞新的父组件

有点像注册了一个vue的公共方法,可以绑定在多个组件或者多个vue对象实例中使用。另一点,类似于在原型对象中注册方法,实例对象即组件或者vue实例对象中,仍然可以定义相同函数名的方法进行覆盖,有点像子类和父类的感觉。

<强> mixin的使用

方法的复用html

& lt; div id=癮pp"比; 　　& lt; child> & lt;/child> 　　& lt; kid> & lt;/kid> 　　& lt;/div>

js

Vue.component(& # 39;孩子# 39;,{ 　　模板:“& lt; h2 @click=癴oo"祝辞孩子component”, 　　方法:{ 　　foo () { 　　console.log(& # 39;孩子foo () & # 39; + this.msg + +) 　　} 　　} 　　}) 　　 　　Vue.component(& # 39;孩子# 39;,{ 　　模板:“& lt; h2 @click=癴oo"祝辞孩子component”, 　　方法:{ 　　foo () { 　　console.log(& # 39;孩子foo () & # 39; + this.msg + +) 　　} 　　} 　　})

在借助mixin之前,在两个不同的组件的组件中调用foo方法,需要重复定义,倘若方法比较复杂,代码将更加冗余。若借助mixin,则变得十分简单:

让mixin={ 　　数据(){ 　　返回{ 　　味精:1 　　} 　　}, 　　方法:{ 　　foo () { 　　从mixin console.log(& # 39;你好! - - - - - & # 39;+ this.msg + +) 　　} 　　} 　　} 　　var的孩子=Vue.component(& # 39;孩子# 39;,{ 　　模板:“& lt; h2 @click=癴oo"祝辞孩子component”, 　　mixin(混合): 　　}) 　　Vue.component(& # 39;孩子# 39;,{ 　　模板:“& lt; h2 @click=癴oo"祝辞孩子component”, 　　mixin(混合): 　　})

虽然此处,两个组件用可以通过这个。味精引用mixin中定义的味精,但是,小编尝试过,两个组件引用的并不是同一个味精,而是各自创建了一个新的味精。如果在组件中定义相同的数据,则此处会引用组件中的味精、而非mixin中的。

以上是vue mixin”指的是什么”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

vue mixin指的是什么