怎么在Vue中實現父子組件的數據傳遞

這篇文章將為大家詳細講解有關怎么在Vue中實現父子組件的數據傳遞，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

1、傳遞基本類型數據

當子組件內容較少時，會直接傳遞基本類型數據，通常為String, Number, Boolean三種。

先看個例子：

<!-- 父組件 parent.vue -->

<template>
  <div class="parent">
    <h4>問卷調查</h4>
    <child v-model="form.name"></child>
    <div class="">
      <p>姓名：{{form.name}}</p>
    </div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: '請輸入姓名'
        }
      }
    }
  }
</script>

<!-- 子組件 child.vue -->

<template>
  <div class="child">
    <label>
      姓名：<input type="text" :value="currentValue" @input="changeName">
    </label>
  </div>
</template>

<script>
  export default {
    props: {
      // 這個 prop 屬性必須是 valule，因為 v-model 展開所 v-bind 的就是 value
      value: ''
    },
    methods: {
      changeName (e) {
        // 給input元素的 input 事件綁定一個方法 changeName 
        // 每次執行這個方法的時候都會觸發自定義事件 input，并且把輸入框的值傳遞進去。
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

給子組件的 input 事件綁定一個方法 changeName，每次執行這個方法的時候都會觸發自定義事件 input，并且把輸入框的值傳遞進去。

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

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

2、傳遞引用類型數據

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

還是先看代碼：

<!-- 父組件 parent.vue -->

<template>
  <div class="parent">
    <h4>問卷調查</h4>
    <child :formData.sync="form"></child>
    <div class="">
      <p>姓名：{{form.name}}</p>
    </div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '請輸入姓名',
          age: '21'
        }
      }
    }
  }
</script>

<!-- 子組件 child.vue -->

<template>
  <div class="child">
    <label>
      姓名：<input type="text" v-model="form.name">
    </label>
    <label>
      年齡：<input type="text" v-model="form.age">
    </label>
    <label>
      地點：<input type="text" v-model="form.address">
    </label>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          name: '',
          age: '',
          address: ''
        }
      }
    },
    props: {
      // 這個 prop 屬性接收父組件傳遞進來的值
      formData: Object
    },
    watch: {
      // 因為不能直接修改 props 里的屬性，所以不能直接把 formData 通過v-model進行綁定
      // 在這里我們需要監聽 formData，當它發生變化時，立即將值賦給 data 里的 form
      formData: {
        immediate: true,
        handler (val) {
          this.form = val
        }
      }
    },
    mounted () {
      // props 是單向數據流，通過觸發 update 事件綁定 formData，
      // 將 data 里的 form 指向父組件通過 formData 綁定的那個對象
      // 父組件在綁定 formData 的時候，需要加上 .sync
      this.$emit('update:formData', this.form)
    }
  }
</script>

props 是單向數據流，當我們需要對 props 內的屬性進行雙向綁定時，就需要用到.sync 修飾符，詳情請參考.sync 修飾符，這里不做贅述。

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

另外，如果我們想要預覽父組件最開始傳的數據，就需要通過 watch 監聽 prop 的變化，在子組件初始化的時候就把值傳進去。

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

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

這里還需要注意的是，如果有多個子組件使用一個對象，那就要避免這種寫法，因為一個組件修改了這個對象的數據，那么其它子組件也就都跟著改變了。

所以我在用的時候都是給每個子組件分配了一個自己的對象，比如：

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

關于怎么在Vue中實現父子組件的數據傳遞就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。