在 Vue.js 中創建自定義組件
[英]Create a custom component in Vue.js
問題描述
我目前正在學習 JavaScript、HTML 和 Vue.Js，以及現在如何使用組件。 我正在學習使用機器人更正代碼的在線課程。
任務是創建一個組件greet ，當使用<greet></greet>調用它時會產生<div>hello!</div> >。 要完成作業，我需要使用Vue.Component和 Templete templete 。 我需要在new Vue調用者處設置el值，使其匹配<div id="app"></div>
到目前為止，這是在我的 HTML 代碼中（包括腳本 src）：
<body>
<div id="app">
<greet="greet"></greet>
</div>
</body>
到目前為止，這是我的 Vue 代碼
new Vue({ el: '#app' })
Vue.component('greet', {
data() {
return {
greet
}
},
template: '<div>hello!</div>'
})
HTML 頁面上的 output 只是空白，所以我不明白我在這里缺少什么。
來自機器人的 output 是：
file.js
✓ exists
✓ is valid JavaScript
1) renders the correct markup
2 個解決方案
解決方案1
0 2020-05-08 19:21:36
這里有幾個錯誤。
首先<greet="greet"></greet>不起作用。 vue 里有個叫props的東西（以后會學） 把那行<greet></greet>
然后您不必使用data()來顯示 hello div。 從數據中刪除greet 。
以上步驟可能會解決您的錯誤
解決方案2
0 2020-05-08 19:23:49
當您使用語法 Vue.component() 時，您正在全局注冊一個組件，因此它可以被之后創建的任何新 Vue 實例使用。 所以：
new Vue({ el: '#app' }) // this Vue instance does not contain the greet component because it does not exists yet.
Vue.component('greet', {
data() {
return {
}
},
template: '<div>hello!</div>'
})
反而：
Vue.component('greet', {
data() {
return {
}
},
template: '<div>hello!</div>'
})
new Vue({ el: '#app' }) // this Vue instance will contain the greet component because it was already created and registered.
<greet="greet"></greet>也不是有效的語法。 它應該是<greet></greet> 。
您應該從 data() function 中刪除 greet。 它沒有任何意義和用途。
最終代碼應如下所示：
<body>
<div id="app">
<greet></greet>
</div>
</body>
Vue.component('greet', {
template: '<div>hello!</div>'
})
new Vue({ el: '#app' })
如何為 Vue.js 組件創建自定義樣式屬性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.