美文网首页
vue2中的mixins

vue2中的mixins

作者: 胖太_91bf | 来源:发表于2017-12-22 11:42 被阅读0次

mixins: 混合对象, 功能类似于Vue.extend();

使用时,在组件的选项中添加mixins: [mixin]

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

注意事项:

1-minxins可以包含任意组件对象的选项(例如:methods, mounted等钩子函数, components, directives等等),
2-当组件使用minxins对象时, minxins对象的选项, 将被混合进组件的选项
3-如果minxins对象的选项是钩子函数(created, mounted等)怎会先于组件的钩子函数执行
4-如果minxins对象的选项为对象(如methods, directives,components), 则会合并为同意对象, 如果键值发生冲突, 则会使用组件的键值对

相关文章

  • vue2中的mixins

    mixins: 混合对象, 功能类似于Vue.extend(); 使用时,在组件的选项中添加mixins: [mi...

  • vue3 mixins

    官方文档没找到具体的例子,就拼命百度, 终于找到了方法 vue2 mixins封装 vue2 .vue 消费组件...

  • vue2 — Mixins

    Mixins选项接受一个混合对象的数组,这些混合的实例对象可以像正常的实例对象一样包含选项,在Vue.extend...

  • form操作清空

    以下是vue2的写法mixins/clean.js文件下 调用的vue文件: 不过Object.assign(th...

  • Vue 混入(mixins和Vue.mixin)

    1.mixins和Vue.mixin mixins 混入 (mixins) 是一种分发 Vue 组件中可复用功能的...

  • (17)Django Rest framwork-优化一(mix

    获取全部信息 优化前: 使用优化的该函数mixins对比 mixins中ListModelMixin中的list方...

  • Flutter/Dart - Dart中一个类实现多个接口 以及

    Dart中implements实现多个接口 Dart中的mixins 使用 mixins的中文意思就是混入,就是在...

  • Dart中的新特性(Mixins)

    什么是Mixins?Mixins的中文意思是混入,即在一个类中混入其他类。首先我们需要知道,Mixins不是接口,...

  • vue + mixins 使用实例

    mixins可写入的模块 mixins可写入组件export default 中的所有内容。data , meth...

  • Vue 之 Mixins (混入)

    Mixins Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。 什么时候使用Mixins 页面的...

网友评论

      本文标题:vue2中的mixins

      本文链接:https://www.haomeiwen.com/subject/uldtgxtx.html