VUE大神的成长之路--混合

基础:
官方解释:混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。

(一)举例一:当对象键值对键名冲突时,保留非mixin对象的键值对
var myMixin = {
template: <h1>hello mixin</h1>',
methods: {
hello: function(){
console.log('this is mixin')
},
say: function(){
console.log('I am mixin')
}
}
}

var Component = Vue.extend({
mixins: [myMixin],
methods: {
list: function(){
console.log('I am list')
},
say: function(){
console.log('I am mixin say')
}
}
})

var newcom = new Component().$mount('#box')
newcom.hello();
newcom.list();
newcom.say();

(二)另一种mixin方法
var myMixin={
template:'<h1>holle mixin</h1>',
methods:{
hello:function(){
console.log('this is mixin')
},
say:function(){
console.log('I am mixin')
}
}
};

var app=new Vue({
mixins:[myMixin],
methods:{
lsit:function(){
console.log('I am lsit')
},
say:function(){
console.log('I am mixin say')
}
}

});

app.hello();
app.lsit();
app.say();

输出:
this is mixin
I am list
I am mixin say

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,268评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,088评论 0 29
  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,909评论 6 16
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,121评论 1 10
  • (本文2006字,阅读时间4分钟) 昨天和闺蜜见面,三言两语就有扯到了女人的最爱---------做媒。闺蜜说,你...
    纾凝阅读 296评论 0 1