vue在组件中实现双向绑定

父组件中的一个变量和子组件的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>

方法二：
<script>
  export default {
    props: ["modelValue"],
  };
</script>

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

最后的效果就是：

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

posted @ 2023-06-09 17:26  上官兰雨  阅读(260)  评论(0)  编辑  收藏  举报