vue混入的使用mixins

关于vue的混入,官方给出是说明是这样的,这是一种非常灵活的方式,用来分发vue组件中可复用的功能。混入对象可以包含所有的组件选项。
什么意思?

使用场景

在这里我们可以看到,混入唯一的功能还是解决代码的复用问题,其实很容易理解。就是将我们组件中多次用到的功能(可以包括组件的所有选项)抽离处理,做成公共的功能,然后在需要使用的组件使用mixins进行引用。
如果多oop思想有深入理解的同学,可以参照oop思想帮助理解,和oop有一定的相似。
其中最典型也是最常用的场景就是:要求界面显示风格不一样,但是里面的数据格式,操作的功能方法都一样或者类似,这时候混入mixins就发挥的最大的作用。

实例

在这里插入图片描述
我们新建一个mixins文件夹用于存放我们的混入文件

testmixins.js

export const testmixins = {
    data(){
        return {
            testmixins123:"我是mixins"
        }
    },
    methods:{
        printmixins(){
            console.log('我是混入的方法');
        }
    }
} 

使用:在需要使用的组件中引入混入,混入里面的数据和方法就可以像组件自身的数据和方法使用了

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>{{ testmixins123 }}</h3>
  </div>
</template>

<script>
import { testmixins } from "./mixins/testmixins";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mixins:[testmixins], // 使用混入
  mounted(){
  	// mixins的方法
    this.printmixins();
  }
}
</script>

选项合并

什么是项合并,其实我的理解叫这个名字不是很合理,不过官方就这么叫了。
意思是说:混入里面的data、method、钩子函数的合并,这里大致分两种情况说明。

1、数据data选项和方法methods选项

当data、methods选项中有同名的数据变量或者方法名,组件自身的data或methods会覆盖混入的data或者methods。

import { testmixins } from "./mixins/testmixins";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mixins:[testmixins],
  mounted(){
    this.printmixins();
  },
  methods:{
    printmixins(){
      console.log("我是组件的方法,覆盖了混入的同名printmixins方法");
    }
  }
}
2、钩子函数

先执行混入的同一钩子函数,然后再执行组件的钩子内容,直接看代码和效果。

testmixins.js

export const testmixins = {
    data(){
        return {
            testmixins123:"我是mixins"
        }
    },
    methods:{
        printmixins(){
            console.log('我是混入的方法');
        }
    },
    created(){
        console.log('我是混入的created钩子')
      },
      mounted(){
        console.log('我是混入的mounted钩子');
      },
} 

使用的组件:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>{{ testmixins123 }}</h3>
  </div>
</template>

<script>
import { testmixins } from "./mixins/testmixins";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mixins:[testmixins],
  created(){
    console.log('我是组件的created钩子')
  },
  mounted(){
    console.log('我是组件的mounted钩子');
    this.printmixins();
  },
  methods:{
    printmixins(){
      console.log("我是组件的方法,覆盖了混入的同名printmixins方法");
    }
  }
}
</script>

结果:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页