本文例項講述了Vue學習之元件用法。分享給大家供大家參考，具體如下：

Vue中的模組化、可重用程式碼塊將頁面細分為一個個功能元件，而且元件之間可以巢狀。元件分為全域性元件與區域性元件，區域性元件在例項中進行註冊，並且只可以應用於該例項中。

1、 元件的使用流程：

  //1、建立元件構造器
    let overallDiv=Vue.extend({
      template:`
        <div>
          <p>這是一個全域性元件div</p>
        </div>
      `
    });
  //2、註冊全域性元件
    Vue.component('overall-div',overallDiv);
  //3、例項化,元件只有在例項化的div內才能使用，不可以直接在頁面中使用
    let vue=new Vue({
      el:'#app',data:{},//在例項內註冊區域性元件，其建立與註冊可以合為一步來寫
    components:{
      'local-div':{
        template:
          ` <div>
              <p>這是一個區域性元件div</p>
           </div>
          `
      }
    },methods:{
    }
    });

在HTML頁面例項化的div中使用元件:

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

注意：一些HTML標籤對放入其中的標籤有限制，這時需要通過is屬性將元件轉化為你要放入的元件，例如<ul>標籤下只能放<li>，這時，你可以使用<li is="my-component">，這樣就相當於放入了<my-component>標籤。

2、template模板

元件的模板除了在js中建立外，還可以使用頁面中的template建立模板，注意頁面中的模板只能有一個根元素，如有多個元素需要包含在一個div內，例如頁面body中的模板：

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

在js中通過id號註冊模板。

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

3、元件的data

在元件中使用data必須以函式的形式返回,如果以屬性值的形式存在，所有的元件會共享一個屬性值，更改其中一個，所有的元件都會收到影響。例如一個統計被點選次數的元件：

  <template id="myBtn">
    <div>
      <button @click="count++">按鈕被點選{{count}}次</button>
    </div>
  </template>

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

在頁面中分別點選兩個按鈕，兩個按鈕元件的count分別計數，不會互相干擾：

4、父子元件

先建立子元件，然後再父元件內進行註冊，就可以在父元件的模板內使用子元件，然後再註冊父元件，這樣就可以在外部呼叫包含子元件的父元件了，外部直接使用父元件介面，而不需要知道內部子元件的實現

注意在外部不能直接使用子元件，因為它只在父元件內進行了註冊，外部看不到子元件

  let child1=Vue.extend({
    template:`<div>這是子元件1</div>`
  });
  let child2=Vue.extend({
    template:`<div>這是子元件2</div>`
  });
  Vue.component('parent',{
    components:{
      'c1':child1,'c2':child2
    },//在父元件內呼叫子元件
    template:`<div>父元件<c1></c1><c2></c2></div>`
  });
  <div id="app">
    <parent></parent>
  </div>

結果如圖：

5、插槽slot

像生活中的容器一樣，slot允許向其中插入標籤、元件等內容，而在外部提供一個框子包裝起來。slot分為匿名插槽與實名插槽，匿名插槽可以向其中插入任何型別的內容。

實名slot可以將內容插入指定的插槽內，就像一臺電腦的主機板，cpu、記憶體條分別有自己對應的插槽，實名插槽在模板中通過name屬性規定插槽的名字，在使用時，通過標籤的slot屬性指定對應的name，可以將標籤插入指定的插槽。

匿名插槽

  <!--匿名插槽-->
  <template id="anonymousDiv">
    <div style="width: 20%;">
      <h3>這是插槽頭部</h3>
      <slot>插槽預設顯示內容</slot>
      <hr/>
      <p>插槽尾部</p>
    </div>
  </template>
  let vue2=new Vue({
    el:'#app2',data:{
    },components:{
     //繫結匿名插槽
     'anonymous-slot':{
       template:'#anonymousDiv'
     },//繫結實名插槽
     'realname-slot':{
       template:'#realnameDiv'
     }
    }
  });

向cpu插槽內插入內容：

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

插槽未放入內容時：插入一段文字：

實名插槽

<template id="realnameDiv">
<div>
  <h3>實名插槽頭部</h3>
  <slot name="cpu">這是cpu插槽</slot>
  <slot name="memery">這是記憶體條插槽</slot>
  <slot name="HardDisk">這是硬碟插槽</slot>
</div>
</template>
<realname-slot>
  <p slot="cpu">Intel Core i5</p>
</realname-slot>

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

希望本文所述對大家vue.js程式設計有所幫助。