首頁(yè)技術(shù)文章正文

mixins功能介紹

更新時(shí)間:2022-02-11 來(lái)源:黑馬程序員 瀏覽量:

mixins是一種分發(fā)Vue組件中可復(fù)用功能的方式。mixins對(duì)象可以包含任何組件選項(xiàng),當(dāng)組件使用mixins時(shí),將定義的mixins對(duì)象引人組件中即可使用,mixins中的所有選項(xiàng)將會(huì)混入到組件自己的選項(xiàng)中。下面我們通過(guò)例3-16進(jìn)行演示。

  【例3-16 】

  (1)創(chuàng)建C:\vuelchapter03\demo16.html文件,具體代碼如下:

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

  在上述代碼中,組件中的mixins屬性用來(lái)配置組件選項(xiàng),其值為自定義選項(xiàng)。第13行通過(guò)Vue.extend()創(chuàng)建實(shí)例構(gòu)造器Component;第14行將自定義的myMixin對(duì)象混入到Component中;第16行通過(guò)new方式完成組件實(shí)例化。

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!