當我們有數個元件的內容很相近,只有少部分內容不一樣的時候,我們可以使用 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 來混合,來看下面範例:
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 混合成
一個元件,這裡的結果會跟上面的元件一樣唷!
那麼,明天再見囉!