怎么在Vue中實(shí)現(xiàn)父子組件的數(shù)據(jù)傳遞

這篇文章將為大家詳細(xì)講解有關(guān)怎么在Vue中實(shí)現(xiàn)父子組件的數(shù)據(jù)傳遞，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

大通網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)公司從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

1、傳遞基本類型數(shù)據(jù)

當(dāng)子組件內(nèi)容較少時(shí)，會(huì)直接傳遞基本類型數(shù)據(jù)，通常為String, Number, Boolean三種。

先看個(gè)例子：

給子組件的 input 事件綁定一個(gè)方法 changeName，每次執(zhí)行這個(gè)方法的時(shí)候都會(huì)觸發(fā)自定義事件 input，并且把輸入框的值傳遞進(jìn)去。

父組件通過 v-model 指令綁定一個(gè)值，來接收子組件傳遞過來的數(shù)據(jù)。但這樣只是父組件響應(yīng)子組件的數(shù)據(jù)，如果還要子組件響應(yīng)父組件傳遞的數(shù)據(jù)，就需要給子組件定義一個(gè)props屬性 value，并且這個(gè)屬性必須是 value，不能寫個(gè)其它單詞。

v-model 其實(shí)就是一個(gè)語法糖，詳情可以參考使用自定義事件的表單輸入組件。

2、傳遞引用類型數(shù)據(jù)

當(dāng)子組件里的內(nèi)容比較多時(shí)，比如子組件有多個(gè)表單元素，如果還像上面那樣給每個(gè)表單元素綁定值，那就要寫很多重復(fù)代碼了。所以這個(gè)時(shí)候通常傳遞的是一個(gè)對(duì)象，傳值的基本原理不變，不過寫法上會(huì)有些不同。

還是先看代碼：

props 是單向數(shù)據(jù)流，當(dāng)我們需要對(duì) props 內(nèi)的屬性進(jìn)行雙向綁定時(shí)，就需要用到.sync 修飾符，詳情請(qǐng)參考.sync 修飾符，這里不做贅述。

這里需要注意的是，vue 中是不能直接修改 props 的，所以如果我們要向父組件傳值，還是需要通過修改 data 里的值，prop 只是作為父子之間通話的中間人存在。

另外，如果我們想要預(yù)覽父組件最開始傳的數(shù)據(jù)，就需要通過 watch 監(jiān)聽 prop 的變化，在子組件初始化的時(shí)候就把值傳進(jìn)去。

注意：我在子組件里把 this.$emit('update:formData', this.form) 放在 mounted 當(dāng)中的，其原因是為了避免在每個(gè) input 標(biāo)簽的 input 事件中觸發(fā)自定義事件，但這樣寫的前提是，父子組件都要共用一個(gè)對(duì)象。

這也就是上面代碼中，父組件中使用 :formData.sync="form" 綁定值時(shí)，form 是一個(gè)對(duì)象，而子組件中的觸發(fā)自定義事件 this.$emit('update:formData', this.form) ，this.form 也得是一個(gè)對(duì)象。

這里還需要注意的是，如果有多個(gè)子組件使用一個(gè)對(duì)象，那就要避免這種寫法，因?yàn)橐粋€(gè)組件修改了這個(gè)對(duì)象的數(shù)據(jù)，那么其它子組件也就都跟著改變了。

所以我在用的時(shí)候都是給每個(gè)子組件分配了一個(gè)自己的對(duì)象，比如：

data () {
 return {
  parentObject: {
   child_1_obj: {},
   child_2_obj: {},
  }
 }
}

關(guān)于怎么在Vue中實(shí)現(xiàn)父子組件的數(shù)據(jù)傳遞就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁題目：怎么在Vue中實(shí)現(xiàn)父子組件的數(shù)據(jù)傳遞
文章來源：http://m.jiaotiyi.com/article/gihdjh.html