vue混合html,VueJS混合

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

示例

VueJs混合(Mixins)示例

var vm = new Vue({

el: '#databinding',

data: {

},

methods : {

},

});

var myMixin = {

created: function () {

this.startmixin()

},

methods: {

startmixin: function () {

alert("Welcome to mixin example");

}

}

};

var Component = Vue.extend({

mixins: [myMixin]

})

var component = new Component();

在浏览器中打开上面示例文件，效果如下 -

当一个混合(mixin)和一个组件包含重叠选项时，它们将被合并，如下例所示。

VueJs Instance

var mixin = {

created: function () {

console.log('mixin called')

}

}

new Vue({

mixins: [mixin],

created: function () {

console.log('component called')

}

});

现在mixin和vue实例创建了相同的方法。下面是在控制台中看到的输出。如下所见，vue和mixin的选项将被合并。

如果碰巧在方法中有相同的函数名，那么主vue实例将会优先。

示例

创建一个文件：mixins-2.html -

VueJs混合(Mixins)示例

var mixin = {

methods: {

hellworld: function () {

console.log('In HelloWorld');

},

samemethod: function () {

console.log('Mixin:Same Method');

}

}

};

var vm = new Vue({

mixins: [mixin],

methods: {

start: function () {

console.log('start method');

},

samemethod: function () {

console.log('Main: same method');

}

}

});

vm.hellworld();

vm.start();

vm.samemethod();

如上面代码中，mixin有一个方法属性，其中定义了helloworld和相同的方法函数。 同样，vue实例也有一个方法属性，在这个属性里面又定义了两个方法start和samemethod。

以下每个方法都被调用。

vm.hellworld(); // In HelloWorld

vm.start(); // start method

vm.samemethod(); // Main: same method

如上所示，已经调用了helloworld，start和same方法。 同样的方法也存在于mixin中，但优先级将赋予主实例，如下面的控制台所示。

¥ 我要打赏

纠错/补充

收藏

加QQ群啦，易百教程官方技术学习群

注意：建议每个人选自己的技术方向加群，同一个QQ最多限加 3 个群。