Vue组件：如何基于计算属性通过@input/@change实现v-model传值？

嘿，这个问题其实很好解决！核心要记住：Vue 2里组件的v-model本质就是语法糖——它等价于给组件传递value prop，同时监听组件触发的input事件。当你想用计算属性代替直接绑定输入框值时，只需要利用计算属性的get和set方法来对接这个逻辑就行。

具体实现步骤 #

我直接给你上代码示例，一看就懂：

子组件（比如CustomInput.vue）

<template>
  <input 
    type="text"
    :value="computedValue"
    @input="handleInput"
  />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  computed: {
    computedValue: {
      // getter：从父组件的value prop获取值，作为输入框显示的内容
      get() {
        // 这里可以加你需要的计算逻辑，比如格式化、转换
        return this.value.toUpperCase(); // 举个例子：把输入转成大写
      },
      // setter：当输入框值变化时，触发这个方法，把新值传给父组件
      set(newVal) {
        // 这里也可以做处理，比如去掉格式再传回去
        const processedVal = newVal.toLowerCase();
        this.$emit('input', processedVal); // 触发input事件，更新父组件的v-model绑定值
      }
    }
  },
  methods: {
    handleInput(e) {
      // 把输入框的新值传给计算属性的setter
      this.computedValue = e.target.value;
    }
  }
};
</script>

父组件使用

<template>
  <div>
    <CustomInput v-model="parentValue" />
    <p>父组件的值：{{ parentValue }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: { CustomInput },
  data() {
    return {
      parentValue: ''
    };
  }
};
</script>

原理说明 #

1. 父组件的v-model="parentValue"会把parentValue作为value prop传给子组件，同时监听子组件的input事件来更新parentValue。
2. 子组件的计算属性computedValue的get方法负责从value prop取值（还能做自定义计算/格式化），作为输入框的显示值。
3. 当输入框触发input事件时，调用handleInput方法，把输入框的新值赋值给computedValue，这会触发计算属性的set方法，在set里我们通过$emit('input', 处理后的值)把新值传给父组件，完成双向绑定。

额外提示 #

如果你的组件是处理单选框、复选框这类元素，Vue 2里默认的v-model对应的是checked prop和change事件，这时候只需要把value换成checked，@input换成@change，计算属性的逻辑同理调整就行。

内容的提问来源于stack exchange，提问作者Roxy Walsh