<template> <div>page1的值是:{{number}}</div> </template> <script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { number:10 } }, mounted(){ this.demo1(); }, methods:{ demo1(){ console.log("这里是page1"); } } } </script> <style scoped> </style>
运行代码我们可以很清晰的看到都是执行我们组件内的值；
因为在vue中我们在实例中声明变量也是通过键值对的形式来声明的，其实也是一个对象；
全局混入：
全局混入我们只需要把mixin.js引入到main.js中，然后将mixin放入到Vue.mixin()方法中即可；
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router.js' import mixin from "./mixin/mixin.js" Vue.config.productionTip = false Vue.mixin(mixin) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
是的，全局混入更为便捷，我们将不用在子组件声明，全局混入将会影响每一个组件的实例，使用的时候需要小心谨慎；这样全局混入之后，我们可以直接在组件中通过this.变量/方法来调用mixin混入对象的变量/方法；
很多同学可能看到这里会有一些疑问，这不就跟Vuex差不多嘛，其实不是的：
mixin混入对象和Vuex的区别：
Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的；
mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；
mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；
mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖；
以上这篇vue祖孙组件之间的数据传递案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: