混入 登录后复制 export const hunhe = { methods: { showName(){ alert(this.name) } }, mounted() { console.log('你好啊!') }, } export const hunhe2 = { data() { return { x:100, y:200 } }, } 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18. 全局引入 登录后复制 //引入Vue import Vue from 'vue' //引入App import App from './App.vue' import {hunhe,hunhe2} from './mixin' //关闭Vue的生产提示 Vue.config.productionTip = false Vue.mixin(hunhe) Vue.mixin(hunhe2) //创建vm new Vue({ el:'#app', render: h => h(App) }) 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17. 局部引入 登录后复制 <template> <div> <h2 @click="showName">学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> </div> </template> <script> //引入一个hunhe // import {hunhe,hunhe2} from '../mixin' export default { name:'School', data() { return { name:'尚硅谷', address:'北京', x:666 } }, // mixins:[hunhe,hunhe2], } </script> 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23. 登录后复制 <template> <div> <h2 @click="showName">学生姓名:{{name}}</h2> <h2>学生性别:{{sex}}</h2> </div> </template> <script> // import {hunhe,hunhe2} from '../mixin' export default { name:'Student', data() { return { name:'张三', sex:'男' } }, // mixins:[hunhe,hunhe2] } </script> 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21. 笔记要点 功能:可以把多个组件共用的配置提取成一个混入对象使用方式: 第一步定义混合: 登录后复制 { data(){....}, methods:{....} .... } 1.2.3.4.5. 第二步使用混入: 全局混入:Vue.mixin(xxx) 局部混入:mixins:['xxx'] 优先级 对于data()中的数据,会使用组件中的数据 对于钩子函数,组件中的和混入中的都使用,优先调用混入中的 原创作者: u_15295225 转载于: https://blog.51cto.com/u_15295225/11339076