Vue.js的混入mixins

作者: Arvin Chen 分类: vue 来源: Break易站(www.breakyizhan.com)

Vue.js的混入(mixins)表示的是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入可以混入任何组件的选项,包括对象。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。这篇文章主要通过下面几个方面来了解Vue.js的混入:

  • Vue.js的基本混入
  • Vue.js的混入:选项合并
  • Vue.js的混入:全局混入
  • Vue.js的混入:自定义选项合并策略

Vue.js的基本混入

举个混入的基本例子,这个例子先定义一个混入对象,再定义一个使用混入对象的组件,然后使用Vue.js混入:

     提示:可以修改代码后运行

Vue.js的混入:选项合并

当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。

比如,数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先。

     提示:可以修改代码后运行

值为对象的选项,例如 methodscomponents 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。注意:Vue.extend() 也使用同样的策略进行合并。

     提示:可以修改代码后运行

Vue.js的混入:全局混入

一旦使用全局混入对象,将会影响到 所有 之后创建的 Vue 实例。所以我们一定要注意使用,下面是一个简单地例子:

     提示:可以修改代码后运行

Vue.js的混入:自定义选项合并策略

自定义选项将使用默认策略,即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies 添加一个函数。更多高级的例子可以在 Vuex 的 1.x 混入策略里找到。

  •   本文标题:Vue.js的混入mixins - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/vue/6707.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注