深刻了解Vue.js組件筆記

一、組件註冊

Vue.component('name',{}) 建立的組件都是全局組件，它們在註冊以後能夠用在任何新建立的Vue根實例(new Vue)的模板中。第一個參數是組件的名字，第二個參數是一個方法，能夠在其中定義組件的data數據、template模板、props傳值、components組件註冊、computed計算屬性、method方法、watch監聽數據變化、以及生命週期的構子函數：beforeCreate、created、beforeMount、mounted、beforeupdate、updated、beforeDestroy、destroyed。
推薦建立一個 components 目錄，並將每一個組件放置在其各自的文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
  components: {
    ComponentA,
    ComponentC
  }
}

二、Prop

• 因爲瀏覽器會把全部大寫字符解釋爲小寫字符。這意味着當你使用 DOM 中的模板時，camelCase (駝峯命名法) 的 prop名須要使用其等價的 kebab-case (短橫線分隔命名) 命名。prop能夠是任何類型的數據、變量或對象，當prop是對象時，即便對象是靜態的也必須使用v-bind。不要在子組件中改變prop的數據，能夠在自身的data裏保存一份該prop屬性

  Vue.component('user', {
       props: ['sayHello']
     })
     <user say-Hello="hello!"></user>
  咱們能夠傳遞靜態Prop（如上），也可使用v-bind傳遞動態Prop（以下）
  <user :title="post.title"></user>

• prop驗證（控制傳入組件數據的類型）
  Vue.component('mycomponent',{

  props:{
         propZ：null,    //匹配任何類型
         propA:Number,    //數字類型
         propB：[Number,String],    //多個可能的類型
         propC：{
             type:String,
             required:true,    //必填
             default:'Hello'    //默認
         },
         propD:{
             type:Object,    //對象類型
             default:function(){    //默認函數
                 return {
                     msg:'hello'
                 }
             }
         },
         propE:{
             //自定義驗證
             validator: function (value) {
                 // 這個值必須匹配下列字符串中的一個
                 return ['success', 'warning', 'danger'].indexOf(value) !== -1
             }
         },
         user:Person
     }

  })

三、自定義事件

一、事件名建議始終使用短橫線鏈接的方式如：my-event
二、自定義組件的 v-model：
    Vue.component('base-checkbox', {
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: Boolean
      },
      template: `
        <input
          type="checkbox"
          v-bind:checked="checked"
          v-on:change="$emit('change', $event.target.checked)"
        >
      `
    })
    <base-checkbox v-model="lovingVue"></base-checkbox>

四、插槽<slot>

一、組件：<base-layout>：
    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name='footer'></slot>
        </footer>
        <slot name="footer"></slot>
    </div>
    
    <base-layout>
        <template slot='header'>
            <h3>我是Header</h3>
        </template>
        <p>我沒有名字</p>
        <p>顯示在默認插槽</p>
        <h3 slot='footer'>具名插槽2</h3>
    </base-layout>
    結果：
    <div class="container">
        <header>
            <h3>我是Header</h3>
        </header>
        <main>
            <p>我沒有名字</p>
            <p>顯示在默認插槽</p>
        </main>
        <footer>
            <h3>具名插槽2</h3>
        </footer>
    </div>

五、動態組件與異步組件

<!-- 失活的組件將會被緩存！-->
<keep-alive>    //<keep-alive>緩存組件切換狀態，組件必須有名字
  <component v-bind:is="currentTabComponent"></component>    //is 特性來切換不一樣的組件
</keep-alive>