无法使用 Vue.js 在可重用组件之间添加自定义内容

Posted 2023-02-16

【中文标题】无法使用 Vue.js 在可重用组件之间添加自定义内容

【英文标题】：Unable to add custom content between Reusable Components with Vue.js

【发布时间】：2021-11-09 02:54:16

【问题描述】：

我正在尝试使用组件创建可重复使用的按钮，但应用到自定义标签以替换默认内容 Custom Text 的新内容 Sign In 不起作用。

Vue 2.6.11 | @vue/cli 4.5.13

我也查了this tutorial

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

导入自定义按钮

<!-- MainMenu.vue component -->
<template>
    <button-wave>Sign In</button-wave>
</template>

<script>
import ButtonWave from './ButtonWave.vue'

export default 
    name: 'main-menu',
    components: 
        ButtonWave
    ,
    ...
</script>

可在https://github.com/axelmukwena/risksis获取可复制代码

【参考方案1】：

您错过了文章作者提到需要插槽的部分：

这样做应该在页面中添加一个按钮元素，其中包含“按钮”的文本。文本内容来自 Button 组件中定义的后备内容。后备内容是通过在组件的标签之间放置内容来定义的。有关插槽和后备内容的更多信息可以阅读here。

您的模板应如下所示：

<template>
<button
    v-wave="
        color: '#0054aa',
        easing: 'ease-out',
        initialOpacity: 0.5,
        finalOpacity: 0.1,
        cancellationPeriod: 75
    "
    type="button"
    class="btn custom-btn"
>
    <slot>Custom Text</slot>
</button>
</template>

我建议您在继续之前检查道具和命名插槽。 祝你的项目好运！

【讨论】：

完全错过了。谢谢。