Cannot use v-for on stateful component root element because it renders multiple elements

1、错误描述

2、错误原因

<template>
	<blog-info v-for="info in infos"
	           v-bind:key="info.id"
			   v:bind:title="info.title"></blog-info>
</template>

<script>
	export default {
		name: "Blog",
		data() {
			return {
				infos: [
					{id:1,title:"张"},
					{id:2,title:"钱"},
					{id:3,title:"孙"},
					{id:4,title:"李"},
					{id:5,title:"赵"},
					{id:6,title:"胡"}
				]
			}
		},
	}
</script>

<style>
</style>

    v-for指令不能写在根元素节点上，因为会渲染出多个元素

3、解决办法

     在组件外层嵌套一个元素

<template>
	<div id="blogInfo">
		<blog-info v-for="info in infos"
				   v-bind:key="info.id"
				   v:bind:title="info.title"></blog-info>
	</div>
</template>

<script>
	export default {
		name: "Blog",
		data() {
			return {
				infos: [
					{id:1,title:"张"},
					{id:2,title:"钱"},
					{id:3,title:"孙"},
					{id:4,title:"李"},
					{id:5,title:"赵"},
					{id:6,title:"胡"}
				]
			}
		},
	}
</script>

<style>
</style>