长沙seo网站管理,网站开发 软文,常州网站制作市场,网站建设期末试卷#x1f90d; 前端开发工程师、技术日更博主、已过CET6 #x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 #x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 #x1f35a; 蓝桥云课签约作者、… 前端开发工程师、技术日更博主、已过CET6 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》 文章目录 父组件向子组件传递数据父组件子组件 子组件向父组件传递数据子组件父组件 自定义 v-model 的参数父组件子组件 注意事项总结 在Vue中组件之间的双向绑定通常是通过使用 v-model 指令来实现的。在Vue3中v-model 的使用方式有所变化支持更灵活的自定义模型。
父组件向子组件传递数据
父组件可以通过 v-model 将数据传递给子组件子组件通过 props 接收这些数据。
父组件
template
ChildComponent v-modelparentData /
/templatescript
import { ref } from vue;
import ChildComponent from ./ChildComponent.vue;export default {
components: {
ChildComponent
},
setup() {
const parentData ref(Hello from parent);
return { parentData };
}
};
/script子组件
template
input :valuemodelValue input$emit(update:modelValue, $event.target.value)
/templatescript
export default {
props: {
modelValue: String // 注意这里使用的是 modelValue 而不是 value
},
emits: [update:modelValue]
};
/script子组件向父组件传递数据
子组件可以通过 $emit 方法触发一个事件来更新父组件中的数据。
子组件
template
input :valuemodelValue input$emit(update:modelValue, $event.target.value)
/templatescript
export default {
props: {
modelValue: String
},
emits: [update:modelValue]
};
/script父组件
template
ChildComponent v-modelparentData /
/templatescript
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 和事件名。
父组件
template
CustomInput v-modelcustomValue /
/templatescript
import { ref } from vue;
import CustomInput from ./CustomInput.vue;export default {
components: {
CustomInput
},
setup() {
const customValue ref();
return { customValue };
}
};
/script子组件
template
input :valuecustomProp input$emit(customUpdate, $event.target.value)
/templatescript
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可以方便地在父组件和子组件之间同步数据。
