vue组件间的数据传递：自定义输入组件（v-model/defineModel）
文章目录
- 引言
- I Vue 3.4 开始，推荐使用 defineModel() 宏
-
- 子组件使用defineModel
- 父组件用 v-model 绑定值
- 底层机制
- II Vue 3.4之前：自定义输入组件（组件中实现 v-model ）
-
- 前置知识
- 父组件监听自定义事件进行 v-model 的数据绑定
- 子组件通过监听input事件触发自定义的 `update:modelValue `事件
- 子组件通过计算属性触发自定义的 `update:modelValue `事件
- III 自定义v-model修饰符
-
- Vue3.4
- Vue3.4之前
引言
v-model可以在组件上使用以实现双向绑定。
从 Vue 3.4 开始，推荐的实现方式是使用
defineModel()宏：
- 其他通讯方式
- 通过 Prop 向子组件传递数据
- 通过
Provide / Inject，父组件作为其所有子组件的依赖提供者。 - 父级组件可以像处理原生 DOM 事件一样通过
v-on或@监听子组件实例的任意事件,子组件通过this.$emit来触发一个事件，将数据传递给父组件。 - 使用插槽 prop，自定义每个子项目数据的渲染方式，可用于子组件向父级组件传递数据。https://blog.csdn.net/z929118967/article/details/126017365