1. 程式人生 > 程式設計 >vue中利用prop進行父子通訊時的注意事項總結

vue中利用prop進行父子通訊時的注意事項總結

目錄
  • 注意點一
  • 注意點二
  • 注意點三:單項資料流
  • 注意點四
  • 總結

注意點一

當在元件上傳入一個普通的字串時,我們可以直接這樣寫:

<one name="張三"></one>

需要注意的是,當我們想要傳入數字時,我們需要使用v-bind繫結一個數字,否則無法識別數字,會認為你傳入的是一個字串數字。

特殊的值包括:向字元鍵傳這些型別的資料時,都需要使用v-bind來告訴vue,我們傳輸的是靜態的值。

  • 數字
  • 布林值
  • 陣列
  • 物件
   <one name="張三" :age="1"></one>

注意點二

當我們想要把一個物件的所有屬性傳給子元件時,我們可以這樣寫:

//要傳輸的物件
post: { id: 1,title: 'My Journey with Vue' }
//直接使用v-bind,將post物件的所有屬性傳遞給子元件
<one v-bind='post'> </one>

子元件接收:

//直接接受父元件傳過來的物件中的屬性名即可
 props: ["id","title"],

注意點三:單項資料流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結:父級 prop 的更新會向下流動到子元件中,但是反過來則不行。這樣會防止從子元件意外變更父級元件的狀態,從而導致你的應用的資料流向難以理解。

http://www.cppcns.com

額外的,每次父級元件發生變更時,子元件中所有的 prop 都將會重新整理為最新的值。這意味著你應該在一個子元件內部改變 prop。如果你這樣做了,Vue 會在瀏覽器的控制檯中發出警告。

這裡有兩種常見的試圖變更一個 prop 的情形:

  • 這個 prop 用來傳遞一個初始值;這個子元件接下來希望將其作為一個本地的 prop 資料來使用。 在這種情況下,最好定義一個本地的 data property 並將這個 prop 用作其初始值:

    props: ['initialCounter'],data: function () {
      return {
        counter: this.initialCounter
      }
    }
  • 這個 prop 以一種原始的值傳入且需要進行轉換。 在這種情況下,最好使用這個 prop 的值來定義一個計算屬性:

    props: ['size'],computed: {
      normalizedSize: function () {
        return this.size.trim().toLowerCase()
      }
    }

注意在 中物件和陣列是通過引用傳入的,所以對於一個數組或物件型別的 prop 來說,在子元件中改變變更這個物件或陣列本身將會影響到父元件的狀態。

注意點四

在使用元件時,如果我們在上面書寫非props屬性,那個這些屬性會作為元件根元素上的自定義屬性。 如果元件根元素上有同樣屬性,那個會被覆蓋掉。使用元件時傳入的值會作為最終的屬性值。

class和styleattribute 會稍微智慧一些,即兩邊的值會被合併起來,從而得到最終的值。

如果我們不想讓要這種預設將非props屬性新增到元件的根元素上,我們可以在元件的選項中配置inheritAttrs: false。設定完以後非props屬性將不在預設新增到根元素上。

其次,我們還可以結合$attrs,就可以手動決定這些非Props屬性www.cppcns.com會被賦予哪個元素。

例如:可以將所有的屬性賦值到標籤http://www.cppcns.com中。

<template>
  <div class="one">
    <span v-bind="$attrs"></span>
  </div>
</template>

總結

到此這篇關於vue中利用prop進行父子通訊時的注意事項的文章就介紹到這了,更多相關vue用prop父子通訊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!