技術標籤：Vue學習筆記vuejavascriptjsvue.js

目錄：

1. 初探vue
2. Vue基礎語法 - 渲染型別
3. Vue基礎語法 - 屬性繫結
4. Vue基礎語法-雙向繫結
5. Vue基礎語法-事件處理
6. Vue的生命週期
7. Vue的動態資料計算
8. Vue中常用API的使用場景

Vue中的元件

這部分內容將分為以下五節：

1. 元件的使用
2. 元件之間的傳參
3. 元件之間的事件傳遞
4. 插槽
5. 動態元件和非同步元件

前言：在單頁面應用開發中，大多數情況下只有一個html頁面，那麼單頁面的頁面跳轉，其實就是各元件之間的切換，那麼這個元件其實就充當的是一個一個獨立的html頁面的角色，只不過這個元件之間可以複用，傳值，隨意呼叫，在vue中通常由（vue-router）和元件（component）來配合完成，那麼這個component就是我們下來將要學習的元件。

什麼是元件？

官方說元件是可複用的 Vue 例項，且帶有一個名字，它與 new Vue 擁有相同的選項，比如它擁有生命週期鉤子、data、computed、methods 等，與 new Vue 的唯一區別是不擁有 el 這樣的根例項選項。

註冊元件的兩種方式

全域性註冊

Vue.component('my-component-name', {/*...*/})

區域性註冊

var ComponentA = { /*....*/ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA
  }
})

無論是全域性註冊還是區域性註冊，每個元件都需要有個名字。比如在全域性註冊的my-component-name

全域性註冊元件的使用場景

    <div id="app">
      <btn-success></btn-success>
    </div>
    
    <script type="text/javascript">
      Vue.component('btn-success', {
        template: '<div> <button class="btn-success" @click="onSuccessClick">成功</button> </div>'
 
,
        methods:{
          onSuccessClick: function(){
            alert('點選了Success按鈕');
          }
        }
      });
      
      var vm = new Vue({
        el: "#app",
      })
      
    </script>

上面的案例中我們註冊了一個全域性元件btn-success,可以看到我們為這個元件提供了一個模板template,這個模板裡的內容其實就是這個元件最終要渲染的內容，並給它添加了一個點選事件 onSuccessClick，點選btn-success 就會觸發 onSuccessClick 方法。

這就是一個單獨模組，它可以獨立去維護自己的點選事件以及生命週期鉤子，當我們需要使用它時，只需要通過 <btn-success></btn-success> 標籤名的方式就可以把它展示在我們的 el 中，在使用VueCli構建工具開發的時候，元件將會被拆分成.vue字尾的單獨檔案，並且各個元件相互獨立，互不干擾。

需要注意的是，元件中的data選項的指向不再是一個物件{},而變成了一個方法funvtion(){return {}}，並通過return返回一個獨立的物件。

舉個例子