首頁 > 文章 > web前端 > 怎樣操作Vue表單類別父子元件資料傳遞

怎樣操作Vue表單類別父子元件資料傳遞

php中世界最好的语言原創: 2018-06-01 11:38:381528瀏覽

這次帶給大家怎樣操作Vue表單類別父子元件資料傳遞，操作Vue表單類別父子元件資料傳遞的注意事項有哪些，下面就是實戰案例，一起來看一下。

使用Vue.js進行專案開發，那必然會使用基於元件的開發方式，這種方式的確給開發和維護帶來的一定的便利性，但如果涉及到元件之間的資料與狀態傳遞交互，就是一件麻煩事了，特別是面對有一大堆表單的頁面。

在這裡記錄我平常常用的處理方式，這篇文章主要記錄父子元件間的資料傳遞，非父子元件主要透過Vuex處理，這篇文章暫時不作說明。

與文件裡給的方案一樣，父元件向子元件傳遞資料主要透過props，子元件向父元件傳遞資料主要透過觸發器 $emit()，只是在用法上會有些不同。

1、傳遞基本類型數據

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

先看個例子：

<!-- 父组件 parent.vue -->
<template>
  <p class="parent">
    <h3>问卷调查</h3>
    <child v-model="form.name"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </p>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: '请输入姓名'
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p class="child">
    <label>
      姓名：<input type="text" :value="currentValue" @input="changeName">
    </label>
  </p>
</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>
  <p class="parent">
    <h3>问卷调查</h3>
    <child :formData.sync="form"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </p>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '请输入姓名',
          age: '21'
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p 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>
  </p>
</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 還是處於使用的階段，對其底層的東西了解還不夠，我也好想讀讀源碼，但總只是想想.....大家覺得有什麼不妥的地方儘管說，大家相互交流交流。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！