Vue中使用mixin
文章目录
-
- 创建基础项目
- 使用mixin
- 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，需要两步走：
- 定义mixin对象
export const common = {
methods:{},
data:{}
//....
}
- 使用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);