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

2022-01-28 14:09:30 标签 htmlvuejs2vue-component

我试图创建一个可重用的按钮使用组件,但新内容的Sign In应用于自定义标签,以替换默认内容自定义文本不工作。

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上找到

###你错过了文章作者提到需要插槽的部分:

这样做应该会在页面上添加一个带有“button”文本的按钮元素。文本内容来自于Button组件中定义的回退内容。通过将内容放在组件的标记之间来定义回退内容。更多关于老虎机和备用的内容可以在这里阅读。

你的模板应该是这样的:

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

我建议你在继续之前先看看道具和命名槽。

祝你的项目好运!

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码