Vue.js可复用组件标签间传入自定义内容替换默认值不生效问题求助

故障原因 #

你的自定义ButtonWave组件没有预留插槽占位位，父组件传入的内容无法被注入到子组件的对应渲染位置，所以按钮始终显示硬编码的Custom Text。

修复步骤 #

修改ButtonWave.vue组件的模板代码，用<slot>标签替换硬编码的默认内容，<slot>标签内部的内容就是默认兜底内容，父组件不传自定义内容时会自动显示该默认值：

<!-- ButtonWave.vue组件 -->
<template>
    <button type="button" class="btn custom-btn">
        <slot>Custom Text</slot>
    </button>
</template>

无需修改父组件MainMenu.vue的现有代码，重启开发服务后即可看到按钮内容已经变为你传入的Sign In。

补充说明 #

如果后续需要给按钮传入多个分散的内容（比如左侧图标+右侧文字），可以使用Vue的具名插槽实现更灵活的内容分发。

内容的提问来源于stack exchange，提问作者axelmukwena