首頁 > 文章 > web前端 > Vue表單類別的父子元件資料傳遞範例

Vue表單類別的父子元件資料傳遞範例

不言原創: 2018-05-05 16:37:251594瀏覽

這篇文章主要介紹了關於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 &#39;./child.vue&#39;

  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;
        }
      }
    }
  }
</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: &#39;&#39;
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
        this.$emit(&#39;input&#39;, 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 &#39;./child.vue&#39;

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;,
          age: &#39;21&#39;
        }
      }
    }
  }
</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: &#39;&#39;,
          age: &#39;&#39;,
          address: &#39;&#39;
        }
      }
    },
    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(&#39;update:formData&#39;, 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 還是處於使用的階段，對其底層的東西了解還不夠，我也好想讀讀源碼，但總只是想想.....大家覺得有什麼不妥的地方儘管說，大家相互交流交流。

Vue表單類別的父子元件資料傳遞範例

相關文章