我有兩個不相關的背景關系組件，它們以一種看起來像是在擴展另一個的方式共享邏輯和模板。
想象一下這樣的 Drop 和 Pick 組件：
// pick.js
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class Pick extends Vue {
template: '<p>{{name}}</p>',
created() {
console.log('Hello Pick');
}
data: {
name: 'pick',
count: 0
},
methods: {
add: function () {
this.count ;
}
}
}
// drop.js
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class Drop extends Vue {
template: '<p>{{name}}</p> <span v-if="isUserFriendly">Greetings!!!</span>',
created() {
console.log('Hello Drop');
}
data: {
name: 'drop',
isUserFriendly: false,
count: 0,
drops: 0
},
methods: {
add: function () {
this.count ;
this.drops ;
},
remove: function () {
this.count--;
},
}
}直觀地說，可以說 Drop 是在擴展 Pick 的同時添加了一些功能并更改了模板。這似乎是一個很好的解決方案，但后來我想，要實作該 Pick 模板應該如下所示：
<p>{{name}}</p>
<span v-if="isUserFriendly">Greetings!!!</span>還記得我說過不相關的背景關系組件嗎？現在 Pick 需要知道 isUserFriendly 這是不可接受的，我認為它是正確的解決方案。此外，它會在未來產生開銷，因為繼承可能難以維護（想象更多要擴展的組件和要共享的邏輯）。
你認為最好的方法是什么？也許還有另一種我不熟悉的方法？
謝謝您的幫助！
uj5u.com熱心網友回復：
組件組合是實作此目的的常用方法。Drop 組件包含功能的超集，即選擇組件應該允許以允許所需輸出和行為的方式進行包裝。
對于父子關系，資料片作為道具和事件傳遞，視圖片作為槽傳遞。
附加邏輯保留在父組件中。
在子組件 ( Pick) 中：
<div>
<p>{{name}}</p>
<slot name="extraText"/>
</div>
和
add: function () {
this.count ;
this.$emit('add');
}
在父組件 ( Drop) 中：
<Pick @add="drops ">
<template v-slot:extraText>
<span>Greetings!!!</span>
</template>
</Pick>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/339636.html
標籤：打字稿 Vue.js 遗产 Vuejs2 vue 组件
上一篇：呼叫了不正確的物件方法