Vue混入,让你的代码更简洁

举报
前端老实人 发表于 2021/12/20 09:39:35 2021/12/20
【摘要】 混入 基础混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。 一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。var minxin = { created () { this.hello(); }, methods: { hello () { console.log('...

混入

基础

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

var minxin = {
  created () {
    this.hello();
  },
  methods: {
    hello () {
      console.log('hello,我是混入中的函数');
    },
  }
}

Vue.component('my-cmp', {
  mixins: [mixin],
  template: `
    <div>xx</div>
  `
})

选项合并

当组件和混入对象含有同名选项时,这些选项会以恰当的方式进行“合并”。

合并数据,以组件数据优先:

var mixin = {
  data () {
    return {
      msg: 'hello',
    }
  }
}
new Vue({
  mixins: [mixin],
  data: {
    msg: 'goodbye',
  },
  created: function () {
    console.log(this.msg)
})

合并钩子函数,将合并为一个数组。先调用混入对象的钩子,再调用组件自身钩子。

var mixin = {
  created () {
    console.log('混入对象钩子')
  }
}

new Vue({
  el: '#app',
  mixins: [mixin],
  created () {
    console.log('组件钩子')
  }
})

合并值为对象的选项,如 methods、components 等,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

全局混入

混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。

 // 为自定义的选项 'myOption' 注入一个处理器。 
Vue.mixin({
  created () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})

谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项。

自定义指令

简介

我们可以自己写一个自定义指令去操作DOM元素,以达到代码复用的目的。注意,在 Vue 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

全局注册指令:

Vue.directive('focus', { /** */ })

局部注册指令

const vm = new Vue({
  el: '#app',
  directives: {
    focus: { /** */ }
  }
})

使用:

<input v-focus></input>

例如,写一个自动聚焦的输入框:

Vue.directive('focus', {
   // 当被绑定的元素插入到DOM时执行
  inserted: function (el) {
    el.focus();
  }
})

此时,在input元素上使用 v-focus 指令就可以实现自动聚焦了。

下一节咱们讲讲自定义指令,下节再见~

最后

如果对您有帮助,希望能给个👍评论/收藏/三连!

博主为人老实,无偿解答问题哦❤

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。