在vue组件内,如果想将一些公共功能,如组件、方法、钩子函数等复用,混入是一个很好的选择。下面简单介绍一下混入的方式及特点。

首先来看看官方文档的介绍:

具体的说,你可以将一个对象作为混入的选项,在组件中复用。因为vue实例也是对象,所以你可以将vue实例作为混入选项传递进去。

组件中的mixins接收一个数组作为值。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ form.a }}</h1>
    <button @click="buttonClick">current</button>
  </div>
</template>

<script>
import fun from './mixins/methods.vue'
// import { constants } from 'http2';
export default {
  name: "HelloWorld",
  mixins:[fun],
  created(){
    console.log('这是当前组件')
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    }
  },
  methods:{
    buttonClick(){
      console.log(this.form.a)
      console.log(this.msg)
      this.clickFn();
      this.exm();
    },
    exm(){
      console.log('这是组件的exm方法')
    }
  }
}
</script>

以上代码将一个vue实例作为混入选项。

 <script> 
export default {
  created(){
    console.log('这是混入的组件')
  },
  data() {
    return {
      msg: 'erwerwe',
      form:{
        a:'aaa'
      }
    }
  },
  methods:{
    clickFn(){
      console.log(this.msg)
    },
    exm(){
      console.log('这是混入的exm方法')
    }
  }
}
</script>

混入了一个方法,和两个同名的data数据,以及created函数。

接下来说一下混入的原则:

1、同名钩子函数将会合并成一个数组,都会调用,混入函数先调用

示意如上

2、data选项将会发生一层浅合并(参考原生的Object.assign()方法),属性冲突时以组件属性优先

混入的对象中也有msg属性,和原组件的msg属性冲突,所以msg为组件的dat的msg属性。组件内无form属性,混入了form属性之后也拥有form属性。

3、值为对象的选项,如methods,components,directives等,将会合并为一个新对象,如果键名冲突,组件的key对应的值优先

上图可以看出,在混入的方法内获取data的数据,结果是最终的msg(而非混入的对象的msg)。在两者都有exm方法时,调用的是组件内的exm方法,(这有别于同名钩子函数的调用方式)。

以上就是混入的用法及区别。

也可以将引入的vue对象写成简单的对象

export default {
  created(){
    console.log('这是混入的组件')
  },
  data() {
    return {
      msg: 'erwerwe',
      form:{
        a:'aaa'
      }
    }
  },
  methods:{
    clickFn(){
      console.log(this.msg)
    },
    exm(){
      console.log('这是混入的exm方法')
    }
  }
}

用法没有变化。

自定义混入的方法在此不坐介绍,有兴趣的同学可以去官方文档查看,

vuejs:混入

Logo

前往低代码交流专区

更多推荐