在 Vue.js 中创建自定义组件答案

【问题标题】：Create a custom component in Vue.js在 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

【问题讨论】：

标签： javascript html vue.js components

【解决方案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' })

【讨论】：