淺談父子組件通信方式

最近在封裝組件，我整理了一些封裝方法，感謝我司的前端團隊，若是還有更好的方法，歡迎來稿，歡迎切磋。

1、v-model的原理

vue的v-model是一個十分強大的指令,它能夠自動讓input裏的值自動和你設定的值進行綁定,它是如何實現的呢?

1.語法糖:使用v-model來進行數據雙向綁定以下:

<input v-model="ying">

2.其實是這樣實現的:

<input v-bind:value="ying" v-on:input="ying=$event.target.value">
<a-input v-bind:value="ying" v-on:input="ying=arguments[0]"></a-input>

3.其實v-model只不過是一個語法糖而已,真正的實現靠的仍是

(1) v-bind:綁定響應式數據
(2) 觸發 input 事件 並傳遞數據 (重點)

2、方法

父子組件通訊，都是單項的，不少時候須要雙向通訊。方法以下：

1. 父組件使用：text.sync="aa" 子組件使用$emit('update:text', 'text改變後的值')
2. 父組件傳值直接傳對象，子組件收到對象後可隨意改變對象的屬性，但不能改變對象自己。
3. 父組件使用： v-model,子組件使用經過監聽value和暴露input事件來實現v-model
4. 父組件使用： v-model 子組件使用model

(1)使用sync

父組件:

<a-input :value.sync="text" ></a-input>

子組件:

<template>
 <div>
     <input v-model="currentValue" @input="handleModelInput">
 </div>
</template>
<script>
 export default {
  props: { 
    value: [String,Number,Date],
  },
  methods: {
       handleModelInput() {
         this.$emit("update:value", this.currentValue);
       }
  },
  watch: {
     value(newValue) {
         this.currentValue = newValue
     }
</script>

(2)使用v-model 子組件觸發 input 事件 並傳遞數據，並對value進行監聽

父組件:

<a-input v-model="text">

子組件:

<input v-model="currentValue" @input="handleModelInput">
props:{
    value:[String,Number],
}
handleModelInput() {
    this.$emit('change',this. currentValue)
}
watch: {
    value(newValue) {
        this.currentValue = newValue
    }
},

(3)使用model prop屬性 even事件change

父組件:

<a-input v-model="text">

子組件:
<template>
 <div>
     <input v-model="currentValue" @input="handleModelInput">
 </div>
</template>
<script>
 export default {
  model: {  
   prop: 'value',
   event: 'change'
  },
  props: {
    value:[String,Number], 
  },
  methods: {
   handleModelInput() {
      this.$emit('change', this.currentValue)
   }
  },
watch: {
    value(newValue) {
        this.currentValue = newValue
    }
 }
</script>

碼字辛苦，文章如對您有幫助，麻煩支持點贊~