如何使用 vue.js 显示两个组件？
Posted
技术标签:
【中文标题】如何使用 vue.js 显示两个组件？【英文标题】：How do I display two components with 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 函数之上定义的。它基本上只是一个获取错误处理程序。
【参考方案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 属性最好使用双引号（道具在代码中使用单引号）
【讨论】：
以上是关于如何使用 vue.js 显示两个组件？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 vue.js 中将卡片数据从一个组件绑定到另一个组件卡片？
如何在 vue.js 前端通过集合数据显示 laravel 组