Vue复用之Mixins混入

本文介绍了Vue中的Mixins混入机制,用于复用组件代码。当组件与Mixins中存在相同的数据对象时,组件内的会覆盖Mixins;而对于钩子函数,会合并进数组并先后触发,首先执行Mixins中的函数。同时提到了全局混入的使用以及自定义合并策略的可能性,提醒开发者需谨慎使用全局混入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

4.1 Mixins 混入

1. 什么是Mixins

当多个组件内部都写了同样的方法,如何将该方法提取出来,减少代码量呢?
Vue实现方式如下:

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

2. mixins里定义的和组件内部定义的重复冲突了怎么办

2.1 数据对象是采取合并策略,

组件内部的覆盖mixins里定义的,如下:

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

2.2 钩子函数采取的是将他们merge进数组

都触发,先触发mixins中的函数,如下

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

// => "mixin hook called"
// => "component hook called"

3. 其他

另外你也可以定义全局混入,即每创建一个vue对象,都会merge全局定义的mixins中的对象,慎用
vue提供了api,让你甚至可以自定义合并的策略

(完)

【更多Vue文档解读】:《Vue Doc 笔记》

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值