浅谈父子组件通讯方式

最近在封装组件，我整理了一些封装方法，感谢我司的前端团队，如果还有更好的方法，欢迎来稿，欢迎切磋。

一、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 事件 并传递数据 (重点)

二、方法

父子组件通信，都是单项的，很多时候需要双向通信。方法如下：

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>

码字辛苦，文章如对您有帮助，麻烦支持点赞~