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

Question

我正在开发 Vue 3 应用程序。我运行在使用 <Navbar /> 组件和 它的一个 sub-components.

时遇到问题

在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”的 2 个按钮。

我的错误在哪里？

Answer 1

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

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

Vue 文档中提到的第一个基本规则是Use multi-word component names。

Answer 2

你需要这样绑定它们 :label="button 1"

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

Why do these Vue props fail outside the main component?

javascript

vue.js

vuejs3

问题

我的错误在哪里？