混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
新建mixin/baseMixin.js
const baseMixin = { data() { return { apiUrl: "https://www.baidu.com", }; }, methods: { success() { console.log("我是公共混入对象,成功!"); }, }, }; export default baseMixin;
在需要使用的组件中使用
<template> <div> 新闻组件---{{apiUrl}} <br> <button @click="success">点击</button> </div> </template> <script> import baseMixin from "@/mixin/baseMixin"; export default { mixins: [baseMixin], data() { return {} } } </script> <style lang="scss" scoped> } </style>
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。
比如,数据对象在内部会进行递归合并,并在发生冲时以组件数据优先。
<!--在Mixin中定义了msg数据--> const baseMixin = { data() { return { apiUrl: "https://www.baidu.com", msg: "baseMixin Msg", } }, methods: { success() { console.log("我是公共混入对象,成功!"); }, }, }; export default baseMixin;
组件使用时,组件内部也定义了msg数据
此时,存在数据对象冲突,以组件数据优先
同意,方法也是如此,相同方法以组件的优先
<!-- --> <template> <div> 首页模板--{{apiUrl}} <br> <br> <button @click="success">处罚</button> <h3>关于Mixin选项的合并</h3> {{msg}} </div> </template> <script> import baseMixin from "@/mixin/baseMixin"; export default { data() { return { msg: "首页", }; }, methods:{ success(){ console.log("我是组件里面的success方法"); } }, mixins: [baseMixin], }; </script> <style scoped> /* @import url(); 引入css类 */ </style>
还可以为Vue应用程序全局配置mixin
在项目入口文件中引入全局配置mixin
import { createApp } from 'vue' import App from './App.vue' import baseMixin from "@/mixin/baseMixin"; // createApp(App).mount('#app') const app=createApp(App); app.mixin(baseMixin); app.mount("#app");
组件中不需要引入,和注册,直接使用mixin混入对象中的数据和方法
<template> <div> <!-- apiUrl为全局的mixin混入对象中的值--> 新闻组件---{{apiUrl}} <br> <!-- success为全局的mixin混入对象中的方法--> <button @click="success">点击</button> </div> </template> <script> export default { data() { return {} }, } </script> <style lang="scss" scoped> </style>