在 Vue.js 中创建自定义组件
Posted
技术标签:
【中文标题】在 Vue.js 中创建自定义组件【英文标题】：Create a custom component in Vue.js 【发布时间】：2020-08-24 09:55:42 【问题描述】：我目前正在学习 javascript、html 和 Vue.Js，现在正在学习如何使用组件。 我正在学习使用机器人更正代码的在线课程。
任务是创建一个组件greet，在使用<greet></greet> 调用它时生成<div>hello!</div>。要完成作业，我需要使用Vue.Component 和templete-key。
我需要将el-value 设置为new Vue-caller，使其匹配<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
【问题讨论】：
【参考方案1】：这里有几个错误。
第一个<greet="greet"></greet> 不起作用。在 vue 中有一个叫 props 的东西（你以后会学到） 把那行改成 <greet></greet>
那么你不必使用data() 来显示hello div。从数据中删除greet。
以上步骤可能会解决您的错误
【讨论】：
【参考方案2】：当您使用语法 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' )
【讨论】：
以上是关于在 Vue.js 中创建自定义组件的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Java 中创建自定义 GUI 组件？ （需要开始提示）
在资产共享公共中创建自定义音频组件一切正常，除了无法在音频文件中获取缩略图