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