vue-mixin(混合) - 技术栈

1.背景

假设定义有两个组件，每个组件内都有一个方法 sayHello()，这两个方法是一模一样的，这个时候就考虑把这样公共的东西抽离出来做成一个混入对象。实际上这就跟工具类有点类似，不过vue有它自己的想法。

2.过程

首先创建两个组件Unit.vue和Staff.vue

Staff.vue

xml 复制代码

<template>
  <div>
    <h2 @click="showName">姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
  </div>
</template>
 
<script>
export default {
  name: "Staff",
  data() {
    return {
      msg: "我是职员组件",
      name:'李四',
      age:20,
    };
  },
  methods: {
    showName(){
      alert("我是谁！")
    }
  },
  
};
</script>

Unit.vue

xml 复制代码

<template>
  <div>
    <h2 @click="showName">单位名称:{{name}}</h2>
    <h2>单位地址：{{address}}</h2>
  </div>
</template>
 
<script>
export default {
  name: "Unit",
  data() {
    return {
      msg: "我是单位组件",
      name:'中国移动',
      address:'安徽省合肥市',
    };
  },
  methods: {
    showName(){
      alert("我是谁！")
    }
  },
  
};
</script>

App.vue

xml 复制代码

<template>
  <div id="app">
    <Staff/>
    <Unit/>
  </div>
</template>
 
<script>
 
import Staff from './components/Staff'
import Unit from  './components/Unit'
 
export default {
  name: 'App',
  components: {
    Unit,Staff
  },
  
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

两个组件中都有showName()方法，我们将它抽离出来，进行混合。创建minxin.js文件

javascript 复制代码

export const minxin={
    methods: {
        showName(){
            alert("我是谁！minxin ")
        }
    },
}

然后将minxin.js文件分别导入Staff.vue和Unit.vue组件中

xml 复制代码

<template>
  <div>
    <h2 @click="showName">姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
  </div>
</template>
 
<script>
import {minxin} from './minxin'
export default {
  name: "Staff",
  data() {
    return {
      msg: "我是职员组件",
      name:'李四',
      age:20,
    };
  },
  //methods: {
   // showName(){
    //  alert("我是谁！")
   // }
 // },
      //混合配置项
  mixins:[minxin] 
};
</script>

<template>
  <div>
    <h2 @click="showName">单位名称:{{name}}</h2>
    <h2>单位地址：{{address}}</h2>
  </div>
</template>
 
<script>
import {minxin} from './minxin'
export default {
  name: "Unit",
  data() {
    return {
      msg: "我是单位组件",
      name:'中国移动',
      address:'安徽省合肥市',
    };
  },
  //methods: {
   // showName(){
     // alert("我是谁！")
   // }
 // },
    //混合配置项
  mixins:[minxin]  
};
</script>

在minxin.js文件添加如下代码：

javascript 复制代码

//minxin.js
export const minxin={    methods: {
        showName(){
            alert("我是谁！混合 ")
        }
    },
    mounted() {
        console.log('我是Vue中混合方法')
    },
}

而在Unit.vue和Staff.vue两个组件中添加如下代码：

xml 复制代码

<template>
  <div>
    <h2 @click="showName">姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
  </div>
</template>
 
<script>
import {minxin} from './minxin'
export default {
  name: "Staff",
  data() {
    return {
      msg: "我是职员组件",
      name:'李四',
      age:20,
    };
  },
  //methods: {
   // showName(){
     // alert("我是谁！")
   // }
 // },
    //混合配置项
   mixins:[minxin],  
   mounted() {
    console.log("我是职员组件!");
  }, 
};
</script>

<template>
  <div>
    <h2 @click="showName">单位名称:{{name}}</h2>
    <h2>单位地址：{{address}}</h2>
  </div>
</template>
 
<script>
import {minxin} from './minxin'
export default {
  name: "Unit",
  data() {
    return {
      msg: "我是单位组件",
      name:'中国移动',
      address:'安徽省合肥市',
    };
  },
  //methods: {
   // showName(){
     // alert("我是谁！")
   // }
 // },
    //混合配置项
  mixins:[minxin],  
  mounted() {
    console.log("我是单位组件!");
  }, 
};
</script>

程序运行后，打开控制台，可以看到触发效果：

可以看到，混合中和组件中都触发了。如果组件中的方法和混合中的方法同名时会触发组件中的方法而不触发混合中的方法。

合中除了写方法外，也可以对外暴露数据，如下：

javascript 复制代码

//minxin.js
export const minxin={    methods: {
        showName(){
            console.log("我是混合组件的showName")
        }
    },
    mounted() {
        console.log('我是Vue中混合方法')    },
}
 
export const hunhe2={
    data() {
        return {
            x:199
        }
    },
}

minxin这个对外暴露了x这个变量，值是199。那么我在其他组件中引入minxin就可以使用x这个变量了。如果组件中本身就有这个变量或者跟混合中的变量重名时以组件中的为准。也就是说，组件中没有才会去混合中寻找这个值。