- 普通混入
<body>
<div id="app">
</div>
<script>
var myMixin = {
created:function () {
this.start()
},
methods:{
start:function () {
document.write("test")
}
}
}
var ComponentMy = Vue.extend({
mixins:[myMixin]
})
new ComponentMy();
new Vue({
el:"#app"
})
</script>
</body>
- 合并混入
<body>
<div id="app">
</div>
<script>
var myMixin = {
created:function () {
document.write("test")
}
}
new Vue({
el:"#app",
mixins:[myMixin]
})
</script>
</body>
- 混入优先级较低
<body>
<div id="app">
</div>
<script>
var myMixin = {
methods:{
start:function () {
document.write("start" + '</br>')
},
end:function () {
document.write("myMixin-end" + '</br>')
}
}
}
var vm = new Vue({
el:"#app",
methods:{
hello:function () {
document.write("hello" + '</br>')
},
end:function () {
document.write("Vue-end" + '</br>')
}
},
mixins:[myMixin]
})
vm.start();
vm.end();
vm.hello();
</script>
</body>
- 全局混入
<body>
<script>
Vue.mixin({
created:function () {
document.write("test")
}
})
new Vue({
})
</script>
</body>