首页技术文章正文

mixins功能介绍

更新时间:2022-02-11 来源:黑马程序员 浏览量:

mixins是一种分发Vue组件中可复用功能的方式。mixins对象可以包含任何组件选项,当组件使用mixins时,将定义的mixins对象引人组件中即可使用,mixins中的所有选项将会混入到组件自己的选项中。下面我们通过例3-16进行演示。

  【例3-16 】

  (1)创建C:\vuelchapter03\demo16.html文件,具体代码如下:

<script>
// 定义myMixin对象
var myMixin = {
  created () {
    this.hello()
  },
  methods: {
    hello () {
      console.log( 'hello from mixin!')
    }
  }
}
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component()
</script>

  在上述代码中,组件中的mixins属性用来配置组件选项,其值为自定义选项。第13行通过Vue.extend()创建实例构造器Component;第14行将自定义的myMixin对象混入到Component中;第16行通过new方式完成组件实例化。

分享到:
在线咨询 我要报名
和我们在线交谈!