阅读 28

mixins和extends的使用

mixins

mixins 就是混入,用简单的话来说就是复制,作用是为了减少重复,并且一个混入对象可以包含任意组件选项。

Mixin.js

const Mixin = {
  methods:{
    hello(){
      console.log('hello')
    }
  },
  created(){
    this.hello()
  }
}

export default Mixin;
复制代码

App.vue

<template>
  <div id="app"></div>
</template>
<script>
import myMixin from "./Mixin.js";
export default {
  mixins:[myMixin]
};
</script>
复制代码

效果

ps:可以引用多个 mixins

选项合并

当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”,以组件数据优先

Mixin.js

const Mixin = {
   data(){
    return{
       x :5,
       y : 10
    }
  }
}

export default Mixin;
复制代码

App.vue

<template>
  <div id="app"></div>
</template>
<script>
import myMixin from "./Mixin.js";
export default {
  mixins:[myMixin],
  data(){
    return{
      x:10,
      z:20
    }
  },
  created(){
    console.log(this.$data)
  }
};
</script>
复制代码

效果

在文件 Mixin.jsx=5,y=10,在文件 App.vuex=10,z=20,在输出结果中我们可以看出,因为数据 x 同名,合并并以组件数据优先,因此输出结果为 x=10, z=20, y=10

作用

mixins 的作用是减少 datamethods、钩子的重复

extends

extends是继承,是比 mixins 更抽象一点的封装,两者有着同样的需求

Extends.js

const myExtends = {
  methods: {
    hello() {
        console.log("hello");
    }
  },
  created() {
      this.hello();
  },
}

export default myExtends;
复制代码

App.vue

<template>
  <div id="app"></div>
</template>
<script>
import myExtends from "./Extends.js";
export default {
  extends:myExtends
};
</script>
复制代码

效果

作用

如果需要多次重复 mixins,可以选择使用 extends

总结

  1. mixinsextends 需求类似,都是为了减少重复
  2. mixins 会智能合并,以组件数据优先
  3. extendsmixins先执行
  4. mixins可以多个,extends只能一个
文章分类
前端
文章标签