1.错误代码示范
<template> <Child :message="message" :age="age" :list="list"/> <button @click="message='全新的数据'" >修改数据</button> <hr/> <Child2 @onEvent="messageHandle"/> <p>{{ child2Data }}</p> </template> <script> import Child from "./Child.vue"; import Child2 from "./Child2.vue" export default { name: "Parent", data(){ return { message:"数据测试", age: 20, list:["iwen","sxt","itbaizhan"], child2Data:"" }; }, methods:{ messageHandle(data) { this.child2Data = data; }, }, components:{ Child, Child2, } } </script> <style scoped> </style>
2.报错内容
3.正确示范
<template> <div> <Child :message="message" :age="age" :list="list"/> <button @click="message='全新的数据'" >修改数据</button> <hr/> <Child2 @onEvent="messageHandle"/> <p>{{ child2Data }}</p> </div> </template> <script> import Child from "./Child.vue"; import Child2 from "./Child2.vue" export default { name: "Parent", data(){ return { message:"数据测试", age: 20, list:["iwen","sxt","itbaizhan"], child2Data:"" }; }, methods:{ messageHandle(data) { this.child2Data = data; }, }, components:{ Child, Child2, } } </script> <style scoped> </style>
4.错误总结
从文字翻译上来讲，其实Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead这句话已经讲的很明白了，直译出来 就是：组件模板应该包含一个根元素。如果在多个元素上使用V-IF，则使用V-ELS-IF来链接它们。
但是这么说依然让新手有点摸不着头脑，其实就是说在模版里只能有一个主div（根对象），如果有多个元素，请用一个主div包含他们。
