vue简单实现双向绑定

Vue 双向绑定的简单实现

Vue 的双向绑定核心是通过 v-model 指令实现的，它结合了 v-bind 和 v-on 的功能。以下是一个简单的实现方式：

模板部分

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
    <p>输入的内容是: {{ message }}</p>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

手动实现双向绑定

如果需要手动实现类似 v-model 的功能，可以通过以下方式：

模板部分

<template>
  <div>
    <input 
      :value="message" 
      @input="message = $event.target.value" 
      placeholder="输入内容"
    >
    <p>输入的内容是: {{ message }}</p>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

自定义组件实现双向绑定

在自定义组件中实现双向绑定，需要使用 model 选项和 $emit：

子组件

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

<script>
export default {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'input'
  }
}
</script>

父组件

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>输入的内容是: {{ message }}</p>
  </div>
</template>

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

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

使用计算属性实现复杂绑定

对于需要处理复杂逻辑的情况，可以使用计算属性：

<template>
  <div>
    <input v-model="computedMessage" placeholder="输入内容">
    <p>处理后的内容是: {{ computedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawMessage: ''
    }
  },
  computed: {
    computedMessage: {
      get() {
        return this.rawMessage
      },
      set(value) {
        this.rawMessage = value.toUpperCase()
      }
    }
  }
}
</script>

以上方法展示了 Vue 中实现双向绑定的不同方式，从最简单的 v-model 到自定义组件的实现，以及使用计算属性处理复杂逻辑的场景。