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组件，因为它可以独立工作，但在这个例子中并不是真的需要。不过，我认为这是一个重要的观点。
分享到:
閱讀更多 空空教你玩黑客 的文章
