vue3双向绑定方法

《vue3双向绑定方法》

在Vue3中实现双向绑定，主要借助于v-model指令以及Vue的响应式原理。它能让视图与数据保持同步，简化了表单输入元素和应用状态之间的交互。

一、使用v - model指令

这是最简单直接的方式。对于输入框等表单元素，只需在元素上添加v-model指令并绑定到一个data中的变量即可。

html

  <div id="app">
    
    <p>{{ message }}</p>
  </div>
</p>


import { ref } from 'vue'

export default {
  setup() {
    const message = ref('')

    return {
      message
    }
  }
}


<p>

这里定义了一个名为message的响应式变量，当在输入框中输入内容时，message会自动更新，并且页面中的

标签也会实时显示的message值，实现了双向绑定。

二、自定义组件的双向绑定

如果想要为自定义组件设置双向绑定，可以通过以下方式。

html
<!-- MyInput.vue -->

  
</p>


export default {
  props: ['modelValue']
}


<p>

然后在父组件中使用：

html

  <div id="app">
    
    <p>{{ customMessage }}</p>
  </div>
</p>


import { ref } from 'vue'
import MyInput from './MyInput.vue'

export default {
  components: {
    MyInput
  },
  setup() {
    const customMessage = ref('')

    return {
      customMessage
    }
  }
}


<p>

通过这种方式，可以为自定义组件提供类似于原生表单元素的双向绑定功能。

三、基于computed属性实现双向绑定

有时候我们可能需要对绑定的数据进行一些处理后再展示或者保存。例如：

html

  <div id="app">
    
    <p>{{ computedMessage }}</p>
  </div>
</p>


import { ref, computed } from 'vue'

export default {
  setup() {
    const originalMessage = ref('')

    const computedMessage = computed({
      get() {
        return originalMessage.value
      },
      set(newValue) {
        originalMessage.value = newValue.toUpperCase()
      }
    })

    return {
      computedMessage
    }
  }
}


<p>