importSurveyInputBasefrom'./SurveyInputBase.vue';
exportdefault{
extends:SurveyInputBase,
props:['placeholder'],
}
子組件使用extendsPug 的功能，其中包含基礎組件，並輸出input塊中的任何自定義內容（一種與插槽無關的概念）。
以下是在擴展基礎並將其轉換回常規HTML Vue模板之後，子組件的模板的實際外觀：
{{ question }}
把它們放在一起
使用這種策略，我們可以繼續創建其他兩個子組件，SurveyInputSelect並SurveyInputRadio使用它們自己的道具和標記。
如果我們在項目中使用它們，我們的主模板可能如下所示：
question="1. What is your name?" placeholder="e.g. John Smith"> question="2. What is your favorite UI framework?" :options="['React', 'Vue.js', 'Angular']"> question="3. What backend do you use?" :options="['Node.js', 'Laravel', 'Ruby']" name="backend">
這裡是渲染的標記：
1. What is your name?
2. What is your favorite UI framework?
3. What backend do you use?
注意：我們也可以實例化SurveyInputBase組件，因為它可以獨立工作，但在這個例子中並不是真的需要。不過，我認為這是一個重要的觀點。
分享到:
閱讀更多 空空教你玩黑客 的文章
