Vue中使用mixin

创建基础项目

使用Vue脚手架创建一个项目，经改造后，项目目录如下所示，

其中，Company.vue的内容如下，

<template>
  <div>
      <h2 @click="showName">公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return {
            name:"五哈科技有限公司",
            address:"上海宝山"
        }
    },
    methods:{
        showName(){
            alert(this.name);
        }
    }
}
</script>

Employee.vue的内容如下，

<template>
  <div>
      <h2 @click="showName">员工姓名：{{name}}</h2>
      <h2>员工性别：{{gender}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return {
            name: "张三",
            gender:"男"
        }
    },
    methods:{
        showName(){
            alert(this.name);
        }
    }
}
</script>

App.vue的内容如下，

<template>
    <div>
        <Company/>
        <Employee/>
    </div>
</template>

<script>
import Company from "./components/Company";
import Employee from "./components/Employee";

export default {
    name:"App",
    components:{
        Company,
        Employee
    }
}
</script>

npm run serve，启动应用，测试效果。

使用mixin

对Company.vue和Employee.vue进行修改：将methods部分提取出来。将提取出来的methods部分放入common.js中。

修改后的Company.vue如下，

<template>
  <div>
      <h2 @click="showName">公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return {
            name:"五哈科技有限公司",
            address:"上海宝山"
        }
    }
}
</script>

修改后的Employee.vue如下，

<template>
  <div>
      <h2 @click="showName">员工姓名：{{name}}</h2>
      <h2>员工性别：{{gender}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return {
            name: "张三",
            gender:"男"
        }
    }
}
</script>

新增的common.js如下，

export const common =  {
    methods:{
        showName(){
            alert(this.name);
        }
    }
}

methods这部分，Company.vue和Employee.vue都有且完全相同，将共有的这部分提取出来放在common.js中。即common.js中定义了混入对象。

接下里就是使用混入对象了。继续修改Company.vue和Employee.vue。

再次修改后的Company.vue，内容如下，

<template>
  <div>
      <h2 @click="showName">公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
  </div>
</template>

<script>
import {common} from "../common";

export default {
    data(){
        return {
            name:"五哈科技有限公司",
            address:"上海宝山"
        }
    },
    mixins:[common]
}
</script>

再次修改后的Employee.vue，内容如下，

<template>
  <div>
      <h2 @click="showName">员工姓名：{{name}}</h2>
      <h2>员工性别：{{gender}}</h2>
  </div>
</template>

<script>
import {common} from "../common";

export default {
    data(){
        return {
            name: "张三",
            gender:"男"
        }
    },
    mixins:[common]
}
</script>

重启应用，测试得到的效果如预期。

上述是使用局部混入，其实还可以全局混入。下面来试下全局混入。

修改后的Company.vue，内容如下，

<template>
  <div>
      <h2 @click="showName">公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return {
            name:"五哈科技有限公司",
            address:"上海宝山"
        }
    }
}
</script>

修改后的Employee.vue，内容如下，

<template>
  <div>
      <h2 @click="showName">员工姓名：{{name}}</h2>
      <h2>员工性别：{{gender}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return {
            name: "张三",
            gender:"男"
        }
    }
}
</script>

修改后的main.js，内容如下，

import Vue from "vue";
import App from "./App";

import {common} from "./common";

Vue.config.productionTip = false;

Vue.mixin(common);

new Vue({
  el:"#app",
  render: h => h(App)
})

mixin小结

mixin的功能是 ，将多个组件共同的配置抽取成一个混入对象。

使用mixin，需要两步走：

1. 定义mixin对象

export const common = {
	methods:{},
	data:{}
	//....
}

2. 使用mixin对象

局部mixin，如下，

//引入mixin对象
import {common} from "./common";

//局部mixin
export default {
	data(){},
	mixins:[common]
}

局部时，如果有多个混入对象，

import {common} from "./common";
import {common2} from "./common2";

export default {
	data(){},
	mixins:[common,common2]
}

全局mixin，如下，

//引入mixin对象
import {common} from "./common";

//全局mixin
Vue.mixin(common); 

全局时，如果有多个混入对象，

import {common} from "./common";
import {common2} from "./common2";

Vue.mixin(common); 
Vue.mixin(common2);