快捷導(dǎo)航

Vue學(xué)習(xí)之組件用法實(shí)例詳解

更新時(shí)間：2020年01月06日 10:48:11 作者：theVicTory

這篇文章主要介紹了Vue學(xué)習(xí)之組件用法,結(jié)合實(shí)例形式分析了vue.js組件的使用流程、模板、父子組件、插槽slot等相關(guān)原理與操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Vue學(xué)習(xí)之組件用法。分享給大家供大家參考，具體如下：

Vue中的模塊化、可重用代碼塊將頁(yè)面細(xì)分為一個(gè)個(gè)功能組件，而且組件之間可以嵌套。組件分為全局組件與局部組件，局部組件在實(shí)例中進(jìn)行注冊(cè)，并且只可以應(yīng)用于該實(shí)例中。

1、組件的使用流程：

  //1、創(chuàng)建組件構(gòu)造器
    let overallDiv=Vue.extend({
      template:`
        <div>
          <p>這是一個(gè)全局組件div</p>
        </div>
      `
    });
  //2、注冊(cè)全局組件
    Vue.component('overall-div',overallDiv);
  //3、實(shí)例化,組件只有在實(shí)例化的div內(nèi)才能使用，不可以直接在頁(yè)面中使用
    let vue=new Vue({
      el:'#app',
      data:{},
    //在實(shí)例內(nèi)注冊(cè)局部組件，其創(chuàng)建與注冊(cè)可以合為一步來(lái)寫
    components:{
      'local-div':{
        template:
          ` <div>
              <p>這是一個(gè)局部組件div</p>
           </div>
          `
      }
    },
    methods:{
    }
    });

在HTML頁(yè)面實(shí)例化的div中使用組件:

  <div id="app">
    <local-div></local-div>
    <overall-div></overall-div>
  </div>

注意：一些HTML標(biāo)簽對(duì)放入其中的標(biāo)簽有限制，這時(shí)需要通過(guò)is屬性將組件轉(zhuǎn)化為你要放入的組件，例如<ul>標(biāo)簽下只能放<li>，這時(shí)，你可以使用<li is="my-component">，這樣就相當(dāng)于放入了<my-component>標(biāo)簽。

2、template模板

組件的模板除了在js中創(chuàng)建外，還可以使用頁(yè)面中的template創(chuàng)建模板，注意頁(yè)面中的模板只能有一個(gè)根元素，如有多個(gè)元素需要包含在一個(gè)div內(nèi)，例如頁(yè)面body中的模板：

  <template id="myTmp">
    <div>
      <p>這是頁(yè)面中的模板</p>
    </div>
  </template>

在js中通過(guò)id號(hào)注冊(cè)模板。

  Vue.component('my-tmp',{
    template:'#myTmp'
  });

3、組件的data

在組件中使用data必須以函數(shù)的形式返回,如果以屬性值的形式存在，所有的組件會(huì)共享一個(gè)屬性值，更改其中一個(gè)，所有的組件都會(huì)收到影響。例如一個(gè)統(tǒng)計(jì)被點(diǎn)擊次數(shù)的組件：

  <template id="myBtn">
    <div>
      <button @click="count++">按鈕被點(diǎn)擊{{count}}次</button>
    </div>
  </template>

  Vue.component('my-btn',{
    template:'#myBtn',
    data () {    //以函數(shù)返回的方式定義組件使用的data
      return {
        count:0
      };
    }
  });   
  <div id="app">
    <my-btn></my-btn>
    <my-btn></my-btn>
  </div>

在頁(yè)面中分別點(diǎn)擊兩個(gè)按鈕，兩個(gè)按鈕組件的count分別計(jì)數(shù)，不會(huì)互相干擾：

4、父子組件

先創(chuàng)建子組件，然后再父組件內(nèi)進(jìn)行注冊(cè)，就可以在父組件的模板內(nèi)使用子組件，然后再注冊(cè)父組件，這樣就可以在外部調(diào)用包含子組件的父組件了，外部直接使用父組件接口，而不需要知道內(nèi)部子組件的實(shí)現(xiàn)

注意在外部不能直接使用子組件，因?yàn)樗辉诟附M件內(nèi)進(jìn)行了注冊(cè)，外部看不到子組件

  let child1=Vue.extend({
    template:`<div>這是子組件1</div>`
  });
  let child2=Vue.extend({
    template:`<div>這是子組件2</div>`
  });
  Vue.component('parent',{
    components:{
      'c1':child1,
      'c2':child2
    },
    //在父組件內(nèi)調(diào)用子組件
    template:`<div>父組件<c1></c1><c2></c2></div>`
  });
  <div id="app">
    <parent></parent>
  </div>

結(jié)果如圖：

5、插槽slot

像生活中的容器一樣，slot允許向其中插入標(biāo)簽、組件等內(nèi)容，而在外部提供一個(gè)框子包裝起來(lái)。slot分為匿名插槽與實(shí)名插槽，匿名插槽可以向其中插入任何類型的內(nèi)容。

實(shí)名slot可以將內(nèi)容插入指定的插槽內(nèi)，就像一臺(tái)電腦的主板，cpu、內(nèi)存條分別有自己對(duì)應(yīng)的插槽，實(shí)名插槽在模板中通過(guò)name屬性規(guī)定插槽的名字，在使用時(shí)，通過(guò)標(biāo)簽的slot屬性指定對(duì)應(yīng)的name，可以將標(biāo)簽插入指定的插槽。

匿名插槽

  <!--匿名插槽-->
  <template id="anonymousDiv">
    <div style="width: 20%;">
      <h3>這是插槽頭部</h3>
      <slot>插槽默認(rèn)顯示內(nèi)容</slot>
      <hr/>
      <p>插槽尾部</p>
    </div>
  </template>
  let vue2=new Vue({
    el:'#app2',
    data:{
    },
    components:{
     //綁定匿名插槽
     'anonymous-slot':{
       template:'#anonymousDiv'
     },
     //綁定實(shí)名插槽
     'realname-slot':{
       template:'#realnameDiv'
     }
    }
  });

向cpu插槽內(nèi)插入內(nèi)容：

  <div id="app2">
    <anonymous-slot>
      <p>向插槽中插入一段文字</p>
    </anonymous-slot>
  </div>

插槽未放入內(nèi)容時(shí)：插入一段文字：

實(shí)名插槽

<template id="realnameDiv">
<div>
  <h3>實(shí)名插槽頭部</h3>
  <slot name="cpu">這是cpu插槽</slot>
  <slot name="memery">這是內(nèi)存條插槽</slot>
  <slot name="HardDisk">這是硬盤插槽</slot>
</div>
</template>
<realname-slot>
  <p slot="cpu">Intel Core i5</p>
</realname-slot>

結(jié)果：cpu放入指定插槽，而其他插槽未受影響：