注意點(diǎn)一

當(dāng)在組件上傳入一個(gè)普通的字符串時(shí)，我們可以直接這樣寫：

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

需要注意的是，當(dāng)我們想要傳入數(shù)字時(shí)，我們需要使用v-bind綁定一個(gè)數(shù)字，否則無法識(shí)別數(shù)字，vue會(huì)認(rèn)為你傳入的是一個(gè)字符串?dāng)?shù)字。

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

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

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

注意點(diǎn)二

當(dāng)我們想要把一個(gè)對(duì)象的所有屬性傳給子組件時(shí)，我們可以這樣寫：

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

子組件接收：

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

注意點(diǎn)三：單項(xiàng)數(shù)據(jù)流

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

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

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

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

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

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

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

注意在 JavaScript 中對(duì)象和數(shù)組是通過引用傳入的，所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來說，在子組件中改變變更這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)。

注意點(diǎn)四

在使用組件時(shí)，如果我們?cè)谏厦鏁鴮懛莗rops屬性，那個(gè)這些屬性會(huì)作為組件根元素上的自定義屬性。 如果組件根元素上有同樣屬性，那個(gè)會(huì)被覆蓋掉。使用組件時(shí)傳入的值會(huì)作為最終的屬性值。

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

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

其次，我們還可以結(jié)合$attrs,就可以手動(dòng)決定這些非Props屬性會(huì)被賦予哪個(gè)元素。

例如：可以將所有的屬性賦值到標(biāo)簽中。

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

總結(jié)

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

最新評(píng)論