无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

(vue extend) Vue中mixin和extends的使用方法详解 Vue 中 mixin 和 extends 的使用: 全网首发(图文详解1)

前沿技术 Micheal 6个月前 (06-13) 75次浏览 已收录 扫描二维码

(vue extend) Vue中mixin和extends的使用方法详解

Vue 中,mixin 和 extends 都是用来抽象和复用组件的常用手段。当你有一些特定的功能,或者一些方法需要在多个组件之间共享的时候,就可以通过 mixin 和 extends 来实现。

接下来,我将先详解这两种方法,然后分享具体的使用以及开发的步骤。

  • Mixins

Mixins 可以说是一种分发 Vue 组件中可复用功能的非常灵活的方式。一个 mixin 对象可以包含任何组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将会被混入到原组件本身的选项。

使用步骤如下:

(1)首先声明一个 mixin:

let myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('来自 mixin 的问候!')
    }
  }
}

(2)然后在组件中使用它:

let Component = Vue.extend({
  mixins: [myMixin]
})

这样一来,Component 就获得了 myMixin 中的 created 钩子函数和 hello 方法。

  1. Extends

extends 是另一种复用组件代码的高级选项。它允许声明一个扩展自其他组件的组件,基本上同样可以实现 mixin 的功能,但是如果遇到同名选项,则会采用覆盖方式,子组件的优先级更高。

使用步骤如下:

(1)首先声明一个基础组件:

const base = {
  methods: {
    show: function () {
      console.log('显示')
    }
  }
}

(2)然后创建一个新组件扩展自基础组件:

let Component = Vue.extend(base)

let instance = new Component()

这样一来,instance 就获得了 base 中的 show 方法。

总的来说,如果你想共享的功能比较简单,推荐使用 mixin,如果你想要继承和修改父组件的一些复杂功能,那么推荐使用 extends。希望以上解答对你有所帮助!
(0x00000040) Win11提示打印机错误0X00000040指定的网络名不再怎么办? 解决网络打印机错误0X00000040 全网首发(图文详解1)
(android retrofit) Android Retrofit使用详细教程 Retrofit 简单使用教程 全网首发(图文详解1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝