为什么这些Vue道具会在主组件之外失效

Question

我正在开发Vue 3应用程序。我在处理<Navbar />组件及其子组件时遇到了一个问题。

在App.vue中：

<template>
<Navbar />
<Content title="Home" />
<Footer />
</template>
<script>
import Navbar from './components/Navbar.vue'
import Content from './components/Content.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Navbar,
Content,
Footer
}
}
</script>

在Content.vue组件中，我可以这样显示标题：

<h1>{{ title }}</h1>
<script>
export default {
name: 'Content',
props: {
title: String
}
}
</script>

但是按照上面相同的模式显示带有标签的按钮是不起作用的：

// Button.vue component
<template>
<button class="btn btn-sm btn-generate">
{{ label }}
</button>
</template>
<script>
export default {
name: 'Button',
props: {
label: String
}
}
</script>

// Navbar.vue component
<template>
<div class="navbar">
<Button label="Button 1" />
<Button label="Button 2" />
</div>
</template>
<script>
import Button from './Button'
export default {
name: 'Navbar',
components: {
Button
}
}
</script>

问题

由于上面的代码，在<div class="navbar">内部只有一个没有标签的按钮，而不是两个标记为"的按钮；按钮1"；以及"；按钮2"；。

我的错在哪里

Answer 1

我认为将组件命名为已经存在的HTML元素不是一个好主意。尝试将其更改为MyButton，并在导航栏组件中使用<my-button>...(您仍然希望在MyButton中使用<button>，因为您希望在此基础上进行构建(。

很可能浏览器仍然只选择一个默认按钮，而不是您的按钮。

Vue文档中提到的第一条基本规则是使用多词组件名称。

Answer 2

您需要绑定它们，这样：label="按钮1"；