vue3父子组件传值 双向绑定及注意问题小结

管理员 JavaScript 219 4

attribute agruments vue3父子组件传值 双向绑定 及注意事项
https:///article/269785.htm可以参考下
首先注意 父子组件传值是单项数据流，vue3中子组件是不能直接修改父组件数据的，vue2中是可以直接使用sync的语法，直接进行修改的而sync修饰符的作用则是简化事件声明及监听的写法。
注意事项：

1
2
3
// 父组件
// v-model 没有指定参数名时，子组件默认参数名是modelValue
<ChildComp v-model="search" />
（1）子组件也并不是直接拿 props 传的变量直接用，而是需要声明一个响应式变量 - 通过 ref(props.modelValue) 声明基于 props 传的变量值为初始化值的响应式数据。
（2）且如果父组件传的是异步数据的话，还需要对其进行监听。
（3）当子组件数据改变时需要通过 emit('update:modelValue', e) 去修改父组件数据实现双向绑定。
举例子：单个数据绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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来进行双向数据绑定

到此这篇关于Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定的文章就介绍到这了,更多相关Vue3父子组件的双向数据绑定内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

相关推荐

评论

展开