(十三)vue3父子组件传值 双向绑定 及注意事项
attribute agruments
vue3父子组件传值 双向绑定 及注意事项
https://www.cnblogs.com/goloving/p/15514672.html 可以先看看这个
首先注意
父子组件传值是单项数据流,vue3中子组件是不能直接修改父组件数据的,
vue2中是可以直接使用sync的语法,直接进行修改的
而sync修饰符的作用则是简化事件声明及监听的写法。
注意事项:
// 父组件
// v-model 没有指定参数名时,子组件默认参数名是modelValue
<ChildComp v-model="search" />
(1)子组件也并不是直接拿 props 传的变量直接用,而是需要声明一个响应式变量 - 通过 ref(props.modelValue) 声明基于 props 传的变量值为初始化值的响应式数据。
(2)且如果父组件传的是异步数据的话,还需要对其进行监听。
(3)当子组件数据改变时需要通过 emit('update:modelValue', e) 去修改父组件数据实现双向绑定。
举例子:单个数据绑定
<template>
<div>
<input v-model="sea" @input="valChange(sea)" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
name: 'ChildComp',
props: {
modelValue: { // 父组件 v-model 没有指定参数名,则默认是 modelValue
type: String,
default: ''
}
},
setup (props, { emit }) {
// input初始化
const sea = ref(props.modelValue)
// 如果父组件传过来的数据是异步获取的,则需要进行监听
watch(() => props.modelValue, () => { sea.value = props.modelValue })
// 数据双向绑定
function valChange (e: string) {
emit('update:modelValue', e)
}
return {
sea,
valChange
}
}
})
</script>
到这就是,在子组件中可以使用你定义ref来使用修改了,可以使用emit的方法回传数据,也可以直接在页面上直接使用v-model来进行双向数据绑定
咫尺远近却无法靠近的那个你,才敢让你发觉你并不孤寂