混入的形式
全局混入 【 不推荐 】
局部混入
混入的作用：
将选项中某一个或是多个单独分离出去管理，让职能更加单一高效，符合模块化思想
全局混入
全局混入 Vue.mixin(config)
mixin.js
/*
这个文件搞方法
*/
const obj = {
methods: {
aa () {
alert('aa')
},
bb () {
alert('bb')
}
}
}
main.html
<body>
<div id="app">
<p> {{ num }} </p>
<p> {{ msg }} </p>
<button @click = "aa"> aa </button>
<button @click = "bb"> bb </button>
</div>
<div id="root">
<button @click = "aa"> aa </button>
<button @click = "bb"> bb </button>
</div>
</body>
<script src="./js/mixin.js"></script>
<script src="../../lib/vue.js"></script>
<script>
/* 全局混入 Vue.mixin(config) */
Vue.mixin({
methods: {
...methods
}
})
new Vue({
el: '#app',
data: {
num: 1000,
msg: 'hello vue'
}
})
new Vue({
el: '#root'
})
</script>
局部混入
data.js
/*
这个文件管理数据
*/
const data = {
data: {
num: 1000,
msg: 'hello vue'
}
}
main.html
<body>
<div id="app">
<p> {{ num }} </p>
<p> {{ msg }} </p>
<button @click="aa"> aa </button>
<button @click="bb"> bb </button>
<p> {{ yybMsg }} </p>
</div>
</body>
<script src="./js/data.js"></script>
<script src="./js/mixin.js"></script>
<script src="../../lib/vue.js"></script>
<script>
/*
分出去的mixin权利是没有总部的大的
*/
new Vue({
el: '#app',
data: {
yybMsg: '这是一个信息',
num: 2000
},
mixins: [data, obj]
})
</script>
