注意點一

當在組件上傳入一個普通的字符串時，我們可以直接這樣寫：

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

需要注意的是，當我們想要傳入數(shù)字時，我們需要使用v-bind綁定一個數(shù)字，否則無法識別數(shù)字，vue會認為你傳入的是一個字符串數(shù)字。

特殊的值包括：向字符鍵傳這些類型的數(shù)據(jù)時，都需要使用v-bind來告訴vue,我們傳輸?shù)氖庆o態(tài)的值。

• 數(shù)字
• 布爾值
• 數(shù)組
• 對象

   <one name="張三" :age="1"></one>

注意點二

當我們想要把一個對象的所有屬性傳給子組件時，我們可以這樣寫：

//要傳輸?shù)膶ο?
post: { id: 1, title: 'My Journey with Vue' }
//直接使用v-bind，將post對象的所有屬性傳遞給子組件
<one v-bind='post'> </one>

子組件接收：

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

注意點三：單項數(shù)據(jù)流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態(tài)，從而導致你的應用的數(shù)據(jù)流向難以理解。

額外的，每次父級組件發(fā)生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。

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

• 這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數(shù)據(jù)來使用。 在這種情況下，最好定義一個本地的 data property 并將這個 prop 用作其初始值：

  props: ['initialCounter'],
  data: function () {
    return {
      counter: this.initialCounter
    }
  }

• 這個 prop 以一種原始的值傳入且需要進行轉換。 在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：

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

注意在 JavaScript 中對象和數(shù)組是通過引用傳入的，所以對于一個數(shù)組或對象類型的 prop 來說，在子組件中改變變更這個對象或數(shù)組本身將會影響到父組件的狀態(tài)。

注意點四

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

class 和 style attribute 會稍微智能一些，即兩邊的值會被合并起來，從而得到最終的值。

如果我們不想讓要這種默認將非props屬性添加到組件的根元素上，我們可以在組件的選項中配置inheritAttrs: false。設置完以后非props屬性將不在默認添加到根元素上。

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

例如：可以將所有的屬性賦值到標簽中。

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

總結

到此這篇關于vue中利用prop進行父子通信時的注意事項的文章就介紹到這了,更多相關vue用prop父子通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論