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