组件之间的双向绑定: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,可以方便地在父组件和子组件之间同步数据。

相关推荐
JarvanMo4 分钟前
Kotlin 2.4 中的更为丰富的错误处理:告别无聊的 try/catch,或者说,还没到告别的时候?
前端
zzywxc78726 分钟前
PyTorch分布式训练:从入门到精通
前端·javascript·人工智能·深度学习·react.js·技术栈深潜计划
尖椒土豆sss29 分钟前
关于vue3 项目中使用 eslint-plugin-vue 报错踩坑记录
vue.js·代码规范·eslint
全宝1 小时前
🎯 ECharts实现水平嵌套气泡图
前端·javascript·echarts
chxii1 小时前
1.8 axios详解
开发语言·前端·javascript
江城开朗的豌豆1 小时前
5招轻松搞定Element-UI样式定制,让你的项目与众不同!
前端·javascript·vue.js
yinuo1 小时前
前端搭建企业微信应用开发环境
前端
小磊哥er1 小时前
【办公自动化】如何使用Python实现读写文件自动化?
前端
前端小巷子1 小时前
Vue内置动画组件 Transition
前端·vue.js·面试
懋学的前端攻城狮1 小时前
Next.js + TypeScript + Shadcn UI 实战:构建可折叠侧边栏与动态内容加载
前端·react.js·next.js