组件之间的双向绑定:v-model

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》《2024面试高频手撕题》《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》《带你从入门到实战全面掌握 uni-app》

文章目录

在Vue中,组件之间的双向绑定通常是通过使用 v-model 指令来实现的。在Vue3中,v-model 的使用方式有所变化,支持更灵活的自定义模型。

父组件向子组件传递数据

父组件可以通过 v-model 将数据传递给子组件,子组件通过 props 接收这些数据。

父组件

html 复制代码
<template>
<ChildComponent v-model="parentData" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
setup() {
const parentData = ref('Hello from parent');
return { parentData };
}
};
</script>

子组件

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

<script>
export default {
props: {
modelValue: String // 注意这里使用的是 'modelValue' 而不是 'value'
},
emits: ['update:modelValue']
};
</script>

子组件向父组件传递数据

子组件可以通过 $emit 方法触发一个事件来更新父组件中的数据。

子组件

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

<script>
export default {
props: {
modelValue: String
},
emits: ['update:modelValue']
};
</script>

父组件

html 复制代码
<template>
<ChildComponent v-model="parentData" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
setup() {
const parentData = ref('Hello from parent');
return { parentData };
}
};
</script>

自定义 v-model 的参数

Vue3 允许自定义 v-model 使用的 prop 和事件名。

父组件

html 复制代码
<template>
<CustomInput v-model="customValue" />
</template>

<script>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

export default {
components: {
CustomInput
},
setup() {
const customValue = ref('');
return { customValue };
}
};
</script>

子组件

html 复制代码
<template>
<input :value="customProp" @input="$emit('customUpdate', $event.target.value)">
</template>

<script>
export default {
props: {
customProp: String // 自定义 prop 名称
},
emits: ['customUpdate'] // 自定义事件名称
};
</script>

在子组件中,你需要定义 emits 选项来声明自定义事件,并在模板中使用 $emit 来触发这些事件。

注意事项

  • 在Vue3中,v-model 默认使用 modelValue 作为 prop 名称,update:modelValue 作为事件名称。
  • 如果需要自定义 v-model 的 prop 或事件名称,可以在子组件中声明,并在父组件中使用自定义名称。
  • 双向绑定可能会导致数据流难以追踪,应谨慎使用,确保数据流单向化。

总结

v-model 是Vue中实现组件之间双向绑定的指令。在Vue3中,v-model 更加灵活,支持自定义 prop 和事件名称。通过 v-model,可以方便地在父组件和子组件之间同步数据。

相关推荐
Ratten几秒前
解决 error when starting dev server TypeError crypto$2.getRandomValues
前端
coding随想3 分钟前
深入浅出DOM3合成事件(Composition Events):如何处理输入法编辑器(IME)的复杂输入流程
前端
六月的雨在掘金3 分钟前
狼人杀法官版,EdgeOne 带你轻松上手狼人杀
前端·后端
Ratten8 分钟前
【npm 解决】---- TypeError: crypto.hash is not a function
前端
前端小大白9 分钟前
JavaScript 循环三巨头:for vs forEach vs map 终极指南
前端·javascript·面试
晴空雨10 分钟前
面试题:如何判断一个对象是否为可迭代对象?
前端·javascript·面试
嘻嘻__11 分钟前
掘金沸点屏蔽脚本分享
前端·掘金社区
用户479492835691512 分钟前
🎨 Prettier 深度解析:从历史演进到内部格式化引擎的完整拆解
前端
Man12 分钟前
uniapp中使用unocss适配多端
前端·css
阿虎儿13 分钟前
React 事件类型完全指南:深入理解合成事件系统
前端·javascript·react.js