vue learning - components

1. The following code reports an error when establishing a parent-child component relationship:  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.   This error is translated as: Template syntax error component Templates should contain exactly one root element, if you are using v-if multiple elements, chain them using v-else-if. The reason for the error is that the vue template only supports one element, and cannot contain two or more side by side. That is to say, in the parent component of worldWorld, the template option should not contain multiple tag elements at the same level. Put <city></city> It is OK to put the element in the p tag or put the p element and the city element into a div at the same time, so that the Vue instance (grandfather) -> worldWorld parent component (father) -> city child component (grandchild) is established. Relationship.
   < body >

   < h1 >Component 03</ h1 >

   < div id = "app" >

   < world ></ world >

   </ div >

   < script>

   city = {

   template: "<div>This is my home city!</div>",

   }

   worldWorld = {

   template: `

   <p>父子组件关系的搭建</p>

   <city></city>

   `,

   components: {

   "city": city

   }

   }

   var app = new Vue({ //初始化根实例

   el: "#app",

   data: {

   message: "xsdsfds"

   },

   components: {

   "world": worldWorld

   }

   })

   </ script>

   </ body>
2. 通过使用Vue内置的component标签动态改变模板 ，并对其  is  特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

   < body>

   < h1>组件04</ h1>

   < div id= "app">

   < component : is= "who"></ component>

   </ div>

   < script>

   pA = {

   template: "<div>this is pA</div>",

   data: function () {

   return {

   a: 11

   }

   }

   };

   pB = {

   template: "<div>this is pB</div>"

   };

   pC = {

   template: "<div>this is pC</div>"

   };

   pD = {

   template: "<div>this is pD</div>"

   }

   var app = new Vue({ //初始化根实例

   el: "#app", //爷爷

   data: {

   who: "pB"

   },

   components: {

   "pA": pA,

   "pB": pB,

   "pC": pC,

   "pD": pD

   }

   })

   </ script>

   </ body>

   
   
3. 代码如下，使用Vue内置的component标签动态改变模板时容易出现的错误：Component template requires a root element, rather than just text. 错误翻译：组件模板需要一个根元素，而不仅仅是文字。所以这时只要给pA的template选项加上一个根元素标签如"<div>this is pA{{a}}</div>"即可>。
   < body>

   < h1>组件04</ h1>

   < div id= "app">

   < component : is= "who"></ component>

   </ div>

   < script>

   pA = {

   template: "this is pA{{a}}",

   data: function () {

   return {

   a: 11

   }

   }

   };

   var app = new Vue({

   el: "#app",

   data: {

   who: "pA"

   },

   components: {

   "pA": pA

   }

   })

   </ script>

   </ body>