在Vue.js中创建自定义组件
我目前正在学习JavaScript、HTML和Vue.Js，现在正在学习如何使用组件。我正在上一个使用机器人改正代码的在线课程。
任务是创建一个组件greet，该组件在使用<greet></greet>调用时生成<div>hello!</div>。要完成分配，我需要使用Vue.Component和templete-key。我需要在new Vue-caller中设置el-value，以便它与<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页面上的输出是空白的，所以我不明白这里遗漏了什么。
机器人的输出是：
file.js
✓ exists
✓ is valid JavaScript
1) renders the correct markup回答 2
Stack Overflow用户
发布于 2020-05-09 03:21:36
这里有几个错误。
首先，<greet="greet"></greet>不起作用。在vue中有一个名为props的东西(您将在以后学习它)，将该行更改为<greet></greet>
这样你就不必使用data()来显示hello div了。从数据中删除greet。
以上步骤可能会修复您的错误
Stack Overflow用户
发布于 2020-05-09 03:23:50
当您使用语法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()函数中删除greet。它没有任何意义和用途。
最终的代码应该如下所示：
<body>
<div id="app">
<greet></greet>
</div>
</body>
Vue.component('greet', {
template: '<div>hello!</div>'
})
new Vue({ el: '#app' })https://stackoverflow.com/questions/61685987
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号