我正在開發一個 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 >只有一個沒有標簽的按鈕，而不是標有“按鈕 1”和“按鈕 2”的 2 個按鈕。
我的錯誤在哪里？
uj5u.com熱心網友回復：
我認為將組件命名為已經存在的 HTML 元素并不是一個好主意。嘗試將其更改為MyButton并<my-button>...在導航欄組件中使用（您仍想<button>在 MyButton 中使用，因為您想在其上構建）。
很可能瀏覽器仍然只選擇一個默認按鈕而不是你的。
Vue 檔案中提到的第一條基本規則是使用多詞組件名稱。
uj5u.com熱心網友回復：
你需要系結它們：label="button 1"
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/457856.html