vue元件component詳解

元件介紹

元件

：

​ 元件是擁有一定功能多個html标簽的集合體，是對html标簽的封裝。

好處

：

​ 模闆中為了實作一個(例如分頁)效果，需要繪制20個html标簽，如果使用元件，就設定一個标簽就可以了，明顯提升開發效率。

元件關鍵字：components、component

私有元件

聲明私有元件文法

：

new Vue({
  components:{
    '元件的名稱': { 配置對象成員 }, 
    '元件的名稱': { 配置對象成員 }...
  },
})
           

注意

：

1. template設定的各個html标簽需要有唯一的根元素節點，一般為div。
2. 元件名稱建議是 xx-yy 的格式。

使用元件文法

：

元件形式上就是html标簽。元件的名字被當做html标簽使用。

案例應用

：

制作一個分頁元件并使用。

<div id="app">
    <h2>元件應用</h2>
    <com-page></com-page>
  </div>

  <script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      el:'#app',
      // 注冊私有元件
      components:{
        'com-page':{
          // template: 設定目前元件擁有的html标簽
          template:`
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
            </ul>
          `
        }
      },
     });
  </script>
           

全局元件

聲明全局元件文法

：

Vue.component(名稱,{配置對象成員})

new Vue()
           

注意

：

​ 全局元件需要在new Vue之前設定。

元件内部相關成員

元件是特殊的Vue執行個體，與Vue執行個體擁有着基本相同的成員，例如 data、methods、filters、directives（自定義元件）、created等等成員在元件内部都可以設定。

注意

：

​ 元件data成員 與 Vue執行個體的不一樣，需要通過 function/return 設定，具體要傳回一個{}對象。

案例應用

：

給分頁元件設定單擊事件、data成員、created生命周期方法并執行：

<div id="app">
    <h2>元件應用-其他成員</h2>
    <com-page></com-page>
  </div>

  <script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      el:'#app',
      // 注冊私有元件
      components:{
        'com-page':{
          template:`
            <ul>
              <li>{{ prev }}</li>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li @click="xia()">{{ next }}</li>
            </ul>
          `,
          created(){
            console.log('created已經執行了')
          },
          methods:{
            xia(){
              console.log('進入下一頁')
            }
          },
          data:function(){
            return {
              prev:'上一頁',
              next:'下一頁',
            }
          }
        }
      },
     });
  </script>
           

function聲明data

元件中聲明的data成員，值需要是一個function，内部通過return傳回{}對象供使用，這個特性必須遵守。

為什麼元件的data必須是一個function

：

​ 元件根據業務需要，可以被使用多次，function會使得每次元件使用的時候都親自執行并給目前應用配置設定一個獨立的資料對象，這樣多個元件的data資料是獨立的，互相沒有關聯、牽扯，互相不會覆寫。

​ 相反，如果直接通過{}對象給data指派，多次使用元件會造成所有元件的data都是共享的，就是一份資料，一個元件修改data後，其他元件都受到影響，這與業務邏輯是相違背的。

元件 與 Vue執行個體異同

：

1. 元件中的 data 必須是一個 function 并 return 一個 字面量對象。

   (Vue 執行個體的 data 可以是 字面量對象，也可以是 function/return形式，前者推薦使用)。

2. 元件中直接通過 template 屬性來指定元件的html結構。

   Vue 執行個體中，一般通過 el 屬性來指定渲染的容器，當然也可以使用template。

3. 元件和Vue執行個體擁有類似的成員，都有自己的生命周期函數，過濾器，methods、data等成員。