淺談Vue下的components模板

晴 微風(fēng) 溫度 12-24°C
在我們越來越深入Vue時，我們會發(fā)現(xiàn)我們對HTML代碼的工程量會越來越少，今天我們來談?wù)刅ue下的 components模板的 初步使用方法與 應(yīng)用

我們先來簡單的寫一段components代碼
(局部方法創(chuàng)造模板)

<div id="app">
  <haha></haha>
</div>

/*
這是最簡單常用的一種創(chuàng)造模板方法，局部方法創(chuàng)造模板
要注意,局部模板 的作用范圍 只在 相對的vue對象 范圍內(nèi) 
比如 這個例子, <haha></haha>的范圍 只在 <div id="app"> </div>內(nèi)
因?yàn)? haha 掛載在 vm的components下 而 vm掛載的 對應(yīng)節(jié)點(diǎn)是 id=app的 div上
*/
let vm = new Vue({
    el:"#app",
    data:{
  },
    components:{
    "haha":{
      template:"<div>哈哈哈<div>"
    }
  }
});

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

<div id="app">
  <hehe></hehe>
</div>


//這里使用Vue.component原型方法來創(chuàng)造
  Vue.component(
  "hehe",template:"<div>呵呵呵<div>"
);

let vm = new Vue({
    el:"#app",
    data:{
  },
    components:{
   //這里則不需要添加,因?yàn)?互不影響
  }
});

其他方法

<div id="app">
  <xixi></xixi>
</div>

let xixi={
  template:"<div>嘻嘻嘻<div>"
}

let vm = new Vue({
  el : "#app",
  data{
  },
  components:{
    xixi
  }

});

(模板的繼承)，全局模板 顧名思義 肯定是 放在哪里都能用

/*
  我們來講個最簡單的 父親，兒子 ，孫子的 例子
  要注意以下幾點(diǎn)：
        1.先實(shí)例化對象vm
        2.造出parent模板,并掛載在 vm的 conponents 下
        3.造出 son 模板 并 掛載 在 父級 parent 的conponents下，并在 父級template屬性中 包裹住自己的 模板名標(biāo)簽 ；同理 造出孫子標(biāo)簽
        4.在HTML節(jié)點(diǎn)中添加 目標(biāo) 根節(jié)點(diǎn)
              （節(jié)點(diǎn)的順序一定要書寫正確）
*/
<div id="app">
  <parent></parent>
</div>

//創(chuàng)建 孫子 模板
  let grendson = { 
    template:"<div>孫子</div>"
 }

//創(chuàng)建 兒子 模板
  let son= { 
    template:"<son>兒子<grendson >孫子</grendson ></son>"
    components:{
     grendson 
    }
 }

//創(chuàng)建 父親 模板
  let parent = { 
    template:"<div>父親<son></son></div>"
    components:{
     son
    }
 }
//實(shí)例化vm對象
  let vm = new Vue({
    el:"#app",
    data:{
    },
    components:{
      parent
    }
});