iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0

Vue extend

當我們有數個元件的內容很相近,只有少部分內容不一樣的時候,我們可以使用 extend 來建立重複的部分,來看下面範例:

<div id="app">
  <child-one></child-one>
  <child-two></child-two>
</div>

<script type="text/x-template" id="childOne">
  <div>
    <h2 style="color: red;">Hello Vue</h2>
    <button @click="sayHi">Click</button>
  </div>
</script>

<script type="text/x-template" id="childTwo">
  <div>
    <h2 style="color: green;">Hello Vue</h2>
    <button @click="sayHi">Click</button>
  </div>
</script>
Vue.component('child-one', {
    template: '#childOne',
    data () {
      return{
        msg: 'Evening'
      }
    },
    methods: {
      sayHi () {
        console.log('Good' + this.msg)
      }
    }
})

Vue.component('child-two', {
    template: '#childTwo',
    data () {
      return{
        msg: 'Evening'
      }
    },
    methods: {
      sayHi () {
        console.log('Good' + this.msg)
      }
    }
})

new Vue({
  el: '#app',
  data: {
    
  }
})

上面這兩個元件僅有少部分內容不同而已,所以我們可以將重複的部分用 extend 建立,再套用到元件內,重複的部分就用 extend 來套用,不同的部分就可以自行建立,所以會變下面這樣:

var extendComponent = Vue.extend({
    template: '#childOne',
    data () {
      return{
        msg: 'Evening'
    }
  },
  methods: {
    sayHi () {
      console.log('Good' + this.msg)
    }
  }
})
Vue.component('child-one', {
  extends: extendComponent
})

Vue.component('child-two', {
  template: '#childTwo',
  extends: extendComponent
})

new Vue({
  el: '#app'
})

可以看到上面的範例,用 extend 建立好需要重複使用的部分後,在第二個元件內因為所使用的模板不一樣,所以我們保留 template 的設定,這樣就可以囉!

Mixins 混合元件內容

再來介紹一個類似的用法,當我們的元件需要混合多個共用的部份的時候,就可以使用 mixins 來混合,來看下面範例:

var mixinComponentOne = {
    template: '#childOne',
    data () {
      return{
        msg: 'Evening'
      }
    },
}

var mixinComponentTwo = {
    methods: {
      sayHi () {
        console.log('Good' + this.msg)
      }
    }
}

Vue.component('child-one', {
  mixins: [mixinComponentOne, mixinComponentTwo]
})

new Vue({
  el: '#app',
})

這裡我將上面的範例裡的元件內容拆分成兩個部份,再用 mixins 混合成
一個元件,這裡的結果會跟上面的元件一樣唷!

那麼,明天再見囉!


上一篇
Day 17 : 動態切換元件
下一篇
Day 19 : Transition 漸變
系列文
Vue 學習筆記 - 讓你30天掌握 Vue31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言