526互联

vue在组件中实现双向绑定

发布时间 2023-06-09 17:33:07作者: 上官兰雨

父组件中的一个变量和子组件的input框实现双向绑定，就要用到下面的方法：

父组件：

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

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

<template>
  <CustomInput v-model="message" /> {{ message }}
</template>

子组件：

<script>
export default {
  props: ['modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

最后的效果就是：

输入框中输入的内容和message变量实现双向绑定