Vue3父子组件数据双向绑定
更多详细内容请前往我的个人博客
一、直接上代码
父组件:
<template><div><h1>父组件</h1><p>用户名: {{username}} </p>父组件输入框:<input type="text" v-model="parentValue" /><p>---------------------------------------------------------------------------------</p><Comp2 v-model:name="username" :value="parentValue"/></div></template><script>import Comp2 from "./Comp2.vue"export default {components: { Comp2 },data() {return {username: '',parentValue:"父组件传给子组件的值.."}}};</script>
子组件:
<template><h1>子组件</h1><div class="border blueviolet">用户名: <input type="text" v-model="username" @input="changeUsername" /></div><br><div>父组件输入框的数据:{{value}}</div></template><script>export default {props: {name: String,value: String,},watch:{value(){console.log(this.value); // 父组件传给子组件的值}},data() {return {username: "",};},methods: {changeUsername() {this.$emit("update:name", this.username);},},};</script>
二、说明:
vue3 中,通过 v-model:propName 实现自定义组件间数据的双向绑定。使用方法:
(1)父组件通过 “v-model:绑定的属性名” 传递数据属性,支持绑定多个属性;
(2)子组件配置emits,通过 “update:属性名” 的格式定义更新事件
需要注意的是:
(1)子组件也并不是直接拿 props 传的变量直接用,而是需要声明一个响应式变量 - 通过 ref(props.modelValue) 声明基于 props 传的变量值为初始化值的响应式数据。
(2)且如果父组件传的是异步数据的话,还需要对其进行监听。
(3)当子组件数据改变时需要通过 emit(‘update:modelValue’, e) 去修改父组件数据实现双向绑定。