Vue -- Mixin

不可能的是

mixins

mixin: 有两个非常相似的组件,他们的基本功能是一样的,可以局注册一个混合,影响注册之后

所有创建的每个 Vue 实例,这就是mixin。

Mixin对编写函数式风格的代码很有用,一般情况下不会改变函数作用域外部的任何东西,输入相同,得到的结果也一定相同。

基础用法

新建一个mixin.js 文件,

 minix.js
  
 export const myminix= {
       data(){
           return {
           }
       },
       mounted(){
          this.sayhello();
       },
       created(){

       },
       methods:{
           sayhello:function(){
              console.log("hello from myMinix!");
           }
       }
}

一个简单的方法,在组件被挂载后 输出 “hello”,

然后在想要使用这个公共方法的组件中引入进去。

other.vue

script:

export default {
 mixins:[myminix],
}

这样引入后的效果,就是在other的组件中,同样加入了sayhello() 方法

other.vue

script:

export default {
    mounted(){
              this.sayhello();
           },
    methods:{
           sayhello:function(){
              console.log("hello from myMinix!");
           }
}

//output  'hello from myMinix'

在other 组件被挂载后,输出hello from myMinix,

冲突


到这里,会有一个问题,如果other.vue 本身也有同样是操作挂载在mounted 上,到底谁会先执行,

other.vue

script:

export default {
    mixins:[myminix],
    mounted(){
              this.sayhello();
           },
    methods:{
           sayhello:function(){
              console.log("hello from other instance!");
           }
}

//output  'hello from myMinix'
//output  'hello from myMinix'

输出了两次一样的结果,都来自other 组件, 第一个函数被调用时,没有被销毁,它只是被重写了。我们在这里调用了两次sayhello()函数。

全局下注册minix

比如在 vue-cli 构建的项目中,main.js 中定义了一个minix,并且挂载在vue 实例上,

 Vue.mixin({
      mounted() {
         console.log("hello from other");
      }
 })

 new Vue({
    

  })

那么在 Vue 实例下的每个组件都会 在挂载的时候执行一次这个方法,输出多次 “hello from other”

阅读 5.5k

stay hungry&&foolish

2.2k 声望
123 粉丝
0 条评论

stay hungry&&foolish

2.2k 声望
123 粉丝
文章目录
宣传栏