[Vue3]父子组件相互传值数据同步

简介

vue3中使用setup语法糖，父子组件之间相互传递数据及数据同步问题

父传子

props传递值 使用v-bind绑定

父组件通过props给子组件传递值，props传递的值在子组件中无法修改

// 父组件
<template>
	<div style="color: red">
		 我是父组件
		 <Child :msg="msg"></Child>
	</div>
</template>
 
<script setup>
    import Child from './Child.vue';
    import {
   
    ref } from 'vue';
    const msg = ref('111');
</script>

// 子组件
<template>
  <div style="color: blue">
    <div>我是子组件, 父组件传递来的值是{
   
   {
   
   msg}}</div>
  </div>
</template>

<script setup>
	defineProps({
   
   
	  msg: String,
	})
</script>

props需要计算

子组件获取props后，需要显示根据其计算后的值，而props是无法修改的。

toRef

props是具有响应式的，普通的解构和取值会失去响应式，所以下面这种情况只能取到props的初始值，如果props变化子组件不会更新：

// 父组件
<script setup>
  import Child from './Child.vue';
  import {
   
    ref } from 'vue';
  const msg = ref('111');
</script>

<template>
  <div style="color: red">
    我是父组件
    {
   
   {
   
    msg }}
    <Child :msg="msg"></Child>
    <button @click="() => msg = '222'">父组件点击改变props值</button>
  </div>
</template>

// 子组件
<script setup>
  import {
   
    ref } from 'vue'
  const props = defineProps({