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

Question

我正在尝试使用组件创建一个可重复使用的按钮，但应用于自定义标签以替换默认内容的新内容 Sign In 无法正常工作 Custom Text。

Vue 2.6.11 | @vue/cli 4.5.13

<!-- 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

获得可复制代码

Answer 1

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

Doing this should add a button element to the page with text that says “Button”. The text content is coming from the fallback content defined within the Button component. Fallback content is defined by putting content between the tags for a component. More can be read about slots and fallback content 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>

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

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

Unable to add custom content between Reusable Components with Vue.js

html

vue-component

vuejs2