uni-app 报错Component template should contain exactly one root element

前言
报错信息:

新手uni-app会碰到这样的错误,刚上手,对vue还不太熟悉,所以对里面的构造方式不太清楚。

对于这个bug,我们很容易翻译为:组件模板应该只包含一个根元素

查看代码

<template>
	
		<view class="content">
			<view>子父组件传值及通信</view>
			<test v-if="flag" :title="title" @myEvent="getNum"></test>
			<button type="primary" @click="changeTest">切换test组件</button>
			<view>子组件值{{num}}</view>
			<view>兄弟组件传值示例</view>
			<test-a></test-a>
			<test-b></test-b>
		</view>
		<view>
			<uni-calendar :insert="true" :lunar="true" :start-date="'2019-3-2'" :end-date="'2029-5-20'"
				@change="change" />
		</view>
	
</template>

如图所示,template未有一个根节点<view></view>来包含整个页面,这是报错的根本原因。

解决
在最外层写一个view,把所有的前端代码放进去就好了

<template>
	<view>
		<view class="content">
			<view>子父组件传值及通信</view>
			<test v-if="flag" :title="title" @myEvent="getNum"></test>
			<button type="primary" @click="changeTest">切换test组件</button>
			<view>子组件值{{num}}</view>
			<view>兄弟组件传值示例</view>
			<test-a></test-a>
			<test-b></test-b>
		</view>
		<view>
			<uni-calendar :insert="true" :lunar="true" :start-date="'2019-3-2'" :end-date="'2029-5-20'"
				@change="change" />
		</view>
	</view>
</template>