間歇性筆記--從頭過一遍元件的"三要素"

daibin0809發表於2019-04-18
筆記元件

元件的prop&slot&event

對元件的prop&slot&event三個API的學習整理~~

prop

  • 大小寫問題---駝峰命名

    1.在字串模板中能正常使用;

        ...
    props:['myData'],
    template:`<h3>{{myData}}</h3>`
    ...
複製程式碼

    2.在html中需要使用短橫線分隔命名(kebab-case),因為HTML中大小寫不敏感,瀏覽器會將所以大寫字元解釋為小寫;

        <dDiv my-data='hi'></dDiv>
複製程式碼

  • 型別
    1.陣列形式;

    props:['myData','myData1']
複製程式碼

    2.物件形式,可以對元件的prop進行驗證(注：基礎型別檢測null和undefined始終通過);

        props:{
        //單個型別
        myData:Number,
        //多個型別
        myData1:[Number],
        myData2:{
            //必填
            required:'true',
            //預設值
            default:0,
            //自定義驗證
            validator:function(){}
        }
    }
複製程式碼

  • 傳遞
    傳遞prop資料時，一般情況都使用v-bind:繫結,否則接受的資料都會為字串--字串除外;

  • 單向資料流

    • 父級元件的prop更新會使的子元件更新,但是反之不行;
    • 子元件改變prop的方法:(不適用於物件與陣列) 1.在子元件的data中用作初始值,一般用於當做子元件的data;
      data(){
    return
    {
        myData1:this.myData,
    }
}
複製程式碼
      2.在子元件中定義計算屬性,一般在需要進行轉換的情況；
          computed:{
        myDataTrim(){
            return this.myData.trim();
        }
    }
複製程式碼
    • 對於prop為物件或者陣列時，傳入的是引用，修改會影響父元件的值,可以根據情況選擇拷貝方式(深拷貝/淺拷貝)進行賦值；

  • 傳遞子元件未定義的資料

    1. 會繫結在子元件的根元素上面；
    2. 如果傳入的特性與子元件的根元素特性相同時。一般情況下，外部傳入的值會替換掉子元件的值。class/style除外,會合並值。
    3. 禁用特性繼承
      子元件中設定：inheritAttrs: false。但是設定不會影響style/class的繫結;子元件可以通過$attrs獲取未繫結的特性；

slot

  • 承載分發內容的出口
    可以讓元件標籤之間的內容有意義,可以是任何模板程式碼;
    <my-link>myLink</my-link>
<a>
    <slot></slot>
</a>
//渲染成：<a>myLink</a>
複製程式碼
    可以在slot中設定預設值,父元件不提供內容時使用；
    <slot>defaultValue</slot>
複製程式碼
  • 作用域 元件只能訪問自身作用域的內容---父元件不能訪問子元件的prop(作用域插槽除外);
  • 作用域插槽 在slot設定prop,讓父元件可以訪問子元件的內容; 當只有一個預設插槽時，可以省略template;
    //slotProps是個物件，收集所有的
<my-component v-slot='slotProps'>slotProps.myData</my-component>
複製程式碼
    獲取插槽內容時，可以使用解構以及設定預設值;
  • 具名插槽 子元件中多個插槽存在時，使用具名插槽讓內容傳入對應的插槽。
    v-slot只能新增在template,預設名稱default---只有一個插槽時例外。
    //基本使用---2.6起之後的版本
child
<div>
    <my-component1>
        <slot name='component1'></slot>
    </my-component1>
    <my-component2>
        <slot></slot>
    </my-component2>
</div>

parent
<child>
    <template v-slot:component1>
        哈哈哈
    </template>
    我是預設插槽的值
</child>
複製程式碼
  • 縮寫(v-slot: --> #) --- 注:必須存在引數,無引數時可使用#default

自定義事件

  • 事件名---Vue官網推薦使用kebab-case格式的事件名
  • 子元件呼叫父元件自定義事件
    在子元件中，通過$emit(eventName[,param])方法觸發父元件的自定義事件；
    //parent.vue
<d-div @parent-event = 'showData'></d-div>

//child.vue
this.$emit('parent-event');
複製程式碼
  • 自定義元件的v-model
    在父元件中使用v-model時，預設會使用value的prop和名為input的事件。但是在單選、核取方塊等控制元件時，value可能用於其他值傳值時會衝突，使用model避免衝突。
    感覺使用場景太偏，可以不使用prop為value的特性進行資料傳遞。(小聲bb--)
    例子：Vue官網的自定義事件
  • 原生事件繫結到元件
    .navite修飾符。將監聽子元件根元素的原生事件,不影響子元件內部的同名事件繫結,先執行父元件上繫結。
  • $listeners 包含了父作用域中的v-on事件監聽器(不包括.native)。
  • .sync
    • 語法糖
    <my-component
    :data.sync='data'>
</my-component>

等同於
//其實就是觸發父元件事件
<my-component
    v-bind:data='data'
    @update:data='data=$event'>
</my-component>
//$event子元件觸發父元件丟擲的值,只接受第一個引數;
子元件
this.$emit('update:data','newData');
複製程式碼
    • 當子元件需要修改prop的值,可以通過此方式更新父元件的值;

後記

粗略的對元件的三個重要要素進行了學習，接下來可能或許是元件間通訊的學習~

相關文章