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組件，因為它可以獨立工作，但在這個例子中並不是真的需要。不過，我認為這是一個重要的觀點。