vue实现组件双向绑定

// test.vue

<template>
  <div>
    <input v-model="val">
    <testComponent v-model="val" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        val: '测试双向绑定'
      }
    }
  }
</script>

父子组件实现双向绑定有两种方法，组件可使用 value 或 v-model 方式进行绑定

方法一：（v-model + 计算属性）

// testComponent.vue

<template>
  <div>
    <input v-model="newVal">
  </div>
</template>

<script>
  export default {
    props: {
      value: [String]
    },

    computed: {
      newVal: {
        get() {
          return this.value
        },
        set(str) {
          this.$emit('input', str)
        }
      }
    }
  }
</script>

方法二：（value + input事件）

// testComponent.vue

<template>
  <div>
    <input :value="value" @input="e => $emit('input', e.target.value)">
  </div>
</template>

<script>
  export default {
    props: {
      value: [String]
    }
  }
</script>

注：自定义组件 v-model prop 和默认事件名称：

prop：value --> modelValue（vue3）

event：input --> update:modelValue（vue3）