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>Building the relationship between parent and child components</p>

   <city></city>

   ` ,

   components: {

   "city" : city

   }

   }

   var app = new Vue ({ //Initialize the root instance

   the: "#app" ,

   data: {

   message: "xsdsfds"

   },

   components: {

   "world" : worldWorld

   }

   })

   </ script >

   </ body >
2. By using Vue's built-in component tag to dynamically change the template and dynamically bind its  is  attribute, you can dynamically switch multiple components at the same mount point:

   < body >

   < h1 >Component 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 ({ //Initialize the root instance

   the: "#app" , //grandpa

   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>