单个根元素

当构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题：

 <h3>{{ title }}</h3>

最最起码，你会包含这篇博文的正文：

 <h3>{{ title }}</h3>
<div v-html="content"></div>

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

 <div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

看起来当组件变得越来越复杂的时候，我们的博文不只需要标题和内容，还需要发布日期、评论等等。为每个相关的信息定义一个 prop 会变得很麻烦：

 <blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
  v-bind:content="post.content"
  v-bind:publishedAt="post.publishedAt"
  v-bind:comments="post.comments"
></blog-post>

所以是时候重构一下这个 <blog-post> 组件了，让它变成接受一个单独的 post prop：

 <blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

 Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

 <!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单个根元素</title>
  <script src="./vue.js"></script>
</head>
 
<body>
  <div id="blog-post-demo">
    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
  </div>
  <script>
    Vue.component('blog-post', {
      props: ['post'],
      template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
    })
    new Vue({
      el: '#blog-post-demo',
      data: {
        posts: [
          { id: 1, title: '黄子涵', content: '黄子涵是帅哥！' },
          { id: 2, title: '黄春钦', content: '黄春钦是黄子涵的弟弟！' },
          { id: 3, title: '陈兰英', content: '陈兰英是黄子涵的妈妈！' }
        ]
      }
    })
  </script>
</body>
 
</html>

警告

上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用折行转义字符取而代之。

现在，不论何时为 post 对象添加一个新的 property，它都会自动地在 <blog-post> 内可用。

posted @ 2022-06-03 22:30 黄子涵阅读(35) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 通过 Prop 向子组件传递数据

· 解析 DOM 模板时的注意事项

· [vue] vue为什么要求组件模板只能有一个根元素？

· Vue练习日常错误笔记（更新中）

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称：黄子涵
园龄： 3年6个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

黄子涵

单个根元素

警告

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

	<div class="blog-post">
	<h3>{{ title }}</h3>
	<div v-html="content"></div>
	</div>

	<blog-post
	v-for="post in posts"
	v-bind:key="post.id"
	v-bind:title="post.title"
	v-bind:content="post.content"
	v-bind:publishedAt="post.publishedAt"
	v-bind:comments="post.comments"
	></blog-post>

	Vue.component('blog-post', {
	props: ['post'],
	template: `
	<div class="blog-post">
	<h3>{{ post.title }}</h3>
	<div v-html="post.content"></div>
	</div>
	`
	})

	<!DOCTYPE html>
	<html lang="zh">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>单个根元素</title>
	<script src="./vue.js"></script>
	</head>

	<body>
	<div id="blog-post-demo">
	<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
	</div>
	<script>
	Vue.component('blog-post', {
	props: ['post'],
	template: `
	<div class="blog-post">
	<h3>{{ post.title }}</h3>
	<div v-html="post.content"></div>
	</div>
	`
	})
	new Vue({
	el: '#blog-post-demo',
	data: {
	posts: [
	{ id: 1, title: '黄子涵', content: '黄子涵是帅哥！' },
	{ id: 2, title: '黄春钦', content: '黄春钦是黄子涵的弟弟！' },
	{ id: 3, title: '陈兰英', content: '陈兰英是黄子涵的妈妈！' }
	]
	}
	})
	</script>
	</body>

	</html>