Component template should contain exactly one root element
vue.js 2.0要求每个组件需拥有有一个根元素。可以在最外层包一个div来解决这个问题1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45<script type="text/x-template" id="cp1">
<div>script生成的组件 {{msg}}</div>
</script>
<!-- 正确 -->
<script type="text/x-template" id="cp2">
<div>script生成的组件 {{msg}}<cp1></cp1></div>
</script>
<!-- 错误 -->
<script type="text/x-template" id="cp2">
<div>script生成的组件 {{msg}}</div>
<cp1></cp1>
</script>
<div id="app">
<cp2></cp2>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'keepfool',
age: 28
},
components: {
'cp2': {
template: '#cp2',
data: function() {
return {msg: "父组件"}
},
components: {
'cp1': {
template: '#cp1',
data: function() {
return {msg: "子组件"}
}
}
}
}
}
})
</script>
