vue混入html,vue混入是什么？

vue混入是什么？

Vue中的混入，即mixins。

混入是干嘛的？官方是这么说的：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

混入其实就是实现了单一继承和多重继承。

(相关课程推荐：Vue.js教程)

应用场景

比如在SPA(单页应用)开发的时候，进入每个组件，你都需要弹出“欢迎进入XXX组件”(实际情况你可能需要多个数据和方法)。这个时候你只需要通过混入就可以方便的实现。这个有点像java的抽象类，子类(子组件)只需要继承，然后需要重写就重写，需要直接调用抽象类的方法就直接调用抽象类的方法。

例子

{{name}}

{{age}}

sayhello

let mixin1 = {

data() {

return {

name: 'wcx',

age: 12

}

},

created() {

console.log('混入created调用')

},

methods: {

sayHello() {

console.log('hello, mixin')

},

sayHi() {

console.log('hi, mixin')

}

}

}

// @ is an alias to /src

export default {

name: 'home',

mixins: [mixin1],

data() {

return {

name: 'wry'

}

},

created() {

console.log('自身组件调用');

this.sayHello();

},

methods: {

sayHello() {

console.log('hello, myself')

}

}

}

本文来自Vue.js答疑栏目，欢迎学习！