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

Question

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

我刚开始学习 vue.js，我正在尝试让我的第二个组件模板显示在页面上。 出于某种原因，vue 没有渲染我的第二个组件，只有第一个。 我认为<education :data='data' />索引文件中有问题。 我是否需要创建一个不同的<div id='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))
    }
  });
})();

索引.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>

Answer 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 在评论中提到的那样，在根组件中调用变量data和调用 props data一样令人困惑。 这些不会导致问题，但为了清楚起见，最好将它们全部重命名（以免与组件的data选项混淆。）
HTML <title>标签中有一个无效的项目符号字符，您可以将其替换为&bullet;
最好为您的 HTML 属性使用双引号（道具在您的代码中使用单引号）

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-11-09 03:50:17

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-11-09 03:50:17

解决方案1
0 已采纳 2020-11-09 03:50:17