代码:
首页先引入A 和 B 组件
<template>
<div>
<DomeA></DomeA>
<hr />
<DomeB></DomeB>
<hr />
<button @click="commonMethod()">commonMethod</button>
</div>
</template>
<script>
import DomeA from "@/views/A-assembly.vue";
import DomeB from "@/views/B-assembly.vue";
// 引入 mixin 公共组件
import mixin from "@/components/11/mixin.js";
export default {
// 混入
mixins: [mixin],
data() {
return {};
},
// 注册组件
components: { DomeA, DomeB },
// 这里是注册了一个与公共组件中事件相同的名字
// 如果当当前文件中要是有与公共组件事件相同的事件
// 则以当前页面文件中的事件优先使用
// A 和 B 组件则还是以公共组件 mixin 事件为准
methods: {
commonMethod() {
console.log("公共数据");
},
},
};
</script>
<style>
</style><template>
<div>
<DomeA></DomeA>
<hr />
<DomeB></DomeB>
</div>
</template>
<script>
import DomeA from "@/views/A-assembly.vue";
import DomeB from "@/views/B-assembly.vue";
export default {
data() {
return {};
},
components: { DomeA, DomeB },
};
</script>
A组件内容
<template>
<div>
<p>{{ aData }}</p>
<p>{{ commonData }}</p>
<button @click="aMethod()">aMethod</button>
<!-- 调用公共组件中的事件 -->
<button @click="commonMethod()">commonMethod</button>
</div>
</template>
<script>
// 引入公共组件文件
import mixin from "@/components/11/mixin.js";
export default {
// 混入
mixins: [mixin],
data() {
return {
// 当前文件独有数据
aData: "A组件数据",
};
},
methods: {
// 当前文件独有的事件
aMethod() {
console.log("组件A的方法");
},
},
// 当前文件独有
mounted() {
console.log("组件a mounted");
},
};
</script>
<style>
</style>
B组件中的内容
<template>
<div>
<div>
<p>{{ bData }}</p>
<p>{{ commonData }}</p>
<button @click="bMethod()">aMethod</button>
<!-- 调用公共组件中事件 如过有参数则在此传参即可 -->
<button @click="commonMethod(bData)">commonMethod</button>
</div>
</div>
</template>
<script>
import mixin from "@/components/11/mixin.js";
export default {
mixins: [mixin],
data() {
return {
bData: "B组件数据",
};
},
methods: {
bMethod() {
console.log("组件B的方法");
},
},
mounted() {
console.log("组件b mounted");
},
};
</script>
<style>
</style>
公共组件内容
export default {
data() {
return {
commonData: "公共数据",
}
},
methods: {
commonMethod(a) {
console.log("公共的方法", a);
},
},
mounted() {
console.log("公共输出");
}
}
mixin 混入的优势
1、后期容易优化和维护
2、可扩展性高
3、代码去重 相同的东西可以直接调用
标签:混入,console,log,理解,export,mixin,组件,import From: https://www.cnblogs.com/BJQE/p/16903048.html