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 混合成
一個元件，這裡的結果會跟上面的元件一樣唷！

那麼，明天再見囉！