浅谈Vue下的components模板

浅谈Vue下的components模板

晴 微风 温度 12-24°C
在我们越来越深入Vue时，我们会发现我们对HTML代码的工程量会越来越少，今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用

我们先来简单的写一段components代码
(局部方法创造模板)

<divid="app">   <haha></haha> </div>  /* 这是最简单常用的一种创造模板方法，局部方法创造模板 要注意,局部模板 的作用范围 只在 相对的vue对象 范围内  比如 这个例子, <haha></haha>的范围 只在 <divid="app"> </div>内 因为  haha 挂载在 vm的components下 而 vm挂载的 对应节点是id=app的div上 */ let vm = new Vue({     el:"#app",     data:{   },     components:{"haha":{       template:"<div>哈哈哈<div>"     }   } });

(共有模板/全局模板)，全局模板 顾名思义 肯定是 放在哪里都能用

<div id="app">   <hehe></hehe> </div>//这里使用Vue.component原型方法来创造   Vue.component("hehe",template:"<div>呵呵呵<div>" );  let vm =new Vue({     el:"#app",     data:{   },     components:{//这里则不需要添加,因为 互不影响   } });

其他方法

<divid="app"><xixi></xixi></div>  let xixi={   template:"<div>嘻嘻嘻<div>" }  let vm = new Vue({   el : "#app",   data{   },   components:{     xixi   }  });

(模板的继承)，全局模板 顾名思义 肯定是 放在哪里都能用

/*   我们来讲个最简单的 父亲，儿子 ，孙子的 例子   要注意以下几点：         1.先实例化对象vm         2.造出parent模板,并挂载在 vm的 conponents 下         3.造出 son 模板 并 挂载 在 父级 parent 的conponents下，并在 父级template属性中 包裹住自己的 模板名标签 ；同理 造出孙子标签         4.在HTML节点中添加 目标 根节点               （节点的顺序一定要书写正确） */<div id="app"><parent></parent></div>//创建 孙子 模板let grendson= {      template:"<div>孙子</div>"  }//创建 儿子 模板let son= {      template:"<son>儿子<grendson >孙子</grendson ></son>"     components:{      grendson      }  }//创建 父亲 模板letparent= {      template:"<div>父亲<son></son></div>"     components:{      son     }  }//实例化vm对象let vm=new Vue({     el:"#app",data:{     },     components:{parent     } });