如何使用 vue.js 显示两个组件？答案

【问题标题】：How do I display two components with vue.js?如何使用 vue.js 显示两个组件？
【发布时间】：2021-02-20 22:17:41
【问题描述】：

这是我在这里的第一篇文章！只是需要一些小的帮助来解决问题。谢谢！

我刚开始学习 vue.js，我正在尝试让我的第二个组件模板显示在页面上。出于某种原因，vue 没有渲染我的第二个组件，只有第一个。我认为<education :data='data' /> 的索引文件中有问题。我需要创建一个不同的<div id='app'> 并将第二个组件放入其中吗？

app.js：

// Fetch handler
function fetchData(url) {
  return fetch(url)
    .then(checkStatus)
    .then(res => res.json())
    .catch(error => console.log('Error retrieving data', error))
}

// Response error handler
function checkStatus(res) {
  if(res.ok) {
      return Promise.resolve(res);
  } else {
      return Promise.reject(new Error(res.statusText));
  }
}

(() => {
  // Define components.
  Vue.component('contact-info', {
    props: ['data'],
    template: `
      <div>
        <img v-bind:src='data.photo'>
        <h1>{{ data.name }}</h1>
        <p>{{ data.email }}</p><p>{{ data.phone }}</p>
        <p v-if='data'>{{ data.links[0] }}</p><p v-if='data'>{{ data.links[1] }}</p>
      </div>
    `
  });

  Vue.component('education', {
    props: ['data'],
    template: `
    <div>
      <h3>Education</h3>
      <div>
        <h2></h2>
        <p></p>
        <p></p>
      <div>
    <div>
    `
  });

  // Instantiate the app.
  const app = new Vue({
    el: '#app',
    data() {
      return {
        data: ''
      }
    },
    mounted() {
      fetchData('https://wip.journeygroup.com/intern-api/joshbryant.json')
          .then(jsonData => (this.data = jsonData))
    }
  });
})();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Resume • Josh Bryant</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/main.css">
  </head>
  <body>
    <div id="app">
      <contact-info :data='data' />
      <education :data='data' />
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="./app/main.js"></script>
  </body>
</html>

【问题讨论】：

不确定这是否是原因，但您不应该将道具命名为 data，因为 data 是 Vue 实例中的特殊对象/函数。将其命名为config、myData 等...另一个细节：fetchData 是什么？它在哪里定义/导入？
抱歉，fetchData 是在 vue 函数之上定义的。它基本上只是一个获取错误处理程序。

标签： javascript vue.js templates components

【解决方案1】：

虽然 HTML 会查找 main.js，但您的帖子显示 app.js，但我认为这只是一个发布错误，因为您已经得到了一些工作。
它不起作用的原因是因为自定义 HTML 组件需要一个结束标记并且不能自动关闭。如果您使用的是 Vue CLI，这无论如何都会起作用，因为编译器会修复它，但不会在 Vue 的 CDN 实现中。第一个组件可以工作，但后面的所有内容都将是无效的 HTML，因为第一个组件没有正确关闭。

这将起作用：

<div id="app">
  <contact-info :data="data"></contact-info>
  <education :data="data"></education>
</div>

其他一些建议

正如 @tao 在 cmets 中提到的那样，在根组件中调用变量 data 会令人困惑，并且调用 props data 也是如此。这些不会引起问题，但最好将它们全部重命名以清楚起见（以免与组件的 data 选项混淆。）
HTML <title> 标记中有一个无效的项目符号字符，您可以将其替换为 &bullet;
HTML 属性最好使用双引号（道具在代码中使用单引号）

【讨论】：