Vue3父子组件传参

一，父子组件传参：

应用场景：父子组件传参
Vue3碎片：defineEmits，defineProps，ref，reactive，onMounted

1.父组件传子组件

a.父组件传参子组件

import { ref} from 'vue'
import OnChild from './onChild.vue'
const toGive=ref("apple");

<OnChild :getGive="toGive" />

b.子组件获取

import { onMounted} from 'vue'
const getFruit=defineProps({getGive:String
})
onMounted(()=>{console.log("子组件获得",getFruit.getGive)
})

2.子组件传父组件

a,子组件

import { reactive} from 'vue'
const playList=reactive({ name:"路人甲"})
playList.type="乒乓球🏓！";

const emit= defineEmits(['toList']);

const pass=()=>{playList.status="发送了一个"emit('toList',playList)
}

b,父组件获取

import { reactive} from 'vue'
import OnChild from './onChild.vue'
const getList= reactive({});

<OnChild  @toList="getListArr"/>

const getListArr=(value)=>{// getList.value=valuegetList.value = { ...Object.assign({}, value)}console.log("接收一个",getList.value);
}

c,父组件更新子组件传送信息

const  updateInfo=(()=>{toGive.value="orange";console.log("传给子组件一个",toGive.value);
})

3.效果图

简单使用，总结至此，欢迎各位工友交流学习。
传送门：
1.Vue3中provide,inject使用
2.Vue3中使用自定义指令
3.Vue3中动态组件使用