晴 微风 温度 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 } });