Vue3中父子组件的v-model双向绑定

原创已于 2022-05-16 15:52:32 修改 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-05-16 14:40:55 首次发布

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

Vue

14 篇文章

订阅专栏

本文介绍了Vue中父组件如何通过`MInput`组件的`v-model`与子组件的`input`事件实现数据双向绑定，并强调了在子组件中使用`defineEmits`确保数据更新传递给父组件的重要性。

以最简单的input组件为例，父组件：

<template>
  <div>
    <MInput v-model="fNumber" @input="changeFNumber"/>
  </div>
</template>

<script setup>
import { ref } from "vue";
import MInput from './input.vue'
const fNumber = ref('23424') // v-model绑定的变量，并赋予初始值
function changeFNumber(e) { // 子组件提供的回调事件
  console.log(fNumber.value)
}
</script>

子组件：

<template>
  <input v-model="inputData" @input="changeVal">
</template>
<script setup>
import {ref, defineProps, defineEmits, watch} from 'vue'
let props = defineProps({
  modelValue: String
})
let emits = defineEmits(['update:modelValue', 'changeVal'])
const inputData = ref(props.modelValue)
const changeVal = (e) => {
  console.log(inputData.value)
  emits('update:modelValue', e.target.value)
}
watch(() => { //因为是双向绑定，所以用watch也可以监听到数据变化
  console.log(fNumber.value)
})
</script>

子组件中通过defineEmits保证在input的数值更新时父组件可以通过@input接收到数据的变化，值得注意的是如果在子组件中定义的是input事件，那父组件只能监听到input事件，如果想通过change事件监听的话只能在子组件中也加一个change事件的回调函数