在vue3中，可以使用vue3的API defineExpose()函数结合ref或者$parent，实现父子组件数据的传递。

子组件向父组件传递数据defineExpose()和ref

  • 子组件：通过defineExpose() 函数，向外暴露响应式数据或者方法
// src/components/son.vue    
        
儿子有 ${{ son_money }}
    import { ref } from 'vue';// 1-定义子组件内部的响应式数据const son_money = ref(500);// 2-定义子组件内部的方法function queryMoney() {    alert('儿子还有 $' + son_money.value);}// 3-重点：把子组件中的数据或者方法暴露出去defineExpose({    son_money,    queryMoney});
  • 父组件：通过ref获取子组件实例，进而获取子组件暴露的响应式数据或方法
// src/App.vue    
        
父组件
                        
                    import { ref } from 'vue';// 1-引入子组件import Son from './components/son.vue';// 3-获取子组件的实例const son = ref();function querySon() {// 4-重点：调用子组件暴露的 queryMoney()方法    son.value.queryMoney();}function giveSon() {// 5-重点：查改子组件暴露的数据 son_money    son.value.son_money += 50;}

💡 你没看错！这里的ref就是经常用来定义响应式数据的那个ref ，所以在script 标签中使用，需要带上.value。

ref 的两个作用：

  • 定义响应式数据
  • 获取子组件实例

父组件向子组件传递数据defineExpose()和$parent

  • 父组件：通过defineExpose() 函数，向外暴露响应式数据或者方法
// src/App.vue    
        
父组件有 ${{ money }}
        
                     import { ref } from 'vue';// 1-引入子组件import Daughter from './components/daughter.vue';// 3-定义父组件响应式数据const money = ref(1000);// 4-定义父组件里的方法function borrowMoney() {    money.value -= 100;    return 100;}// 5-重点：暴露父组件的数据和方法defineExpose({    money,    borrowMoney});
  • 子组件：通过监听事件和$parent ，获取父组件向外暴露的响应式数据或者方法
    
        
我是子组件，我有 ${{ dau_money }}
                    import { ref } from 'vue';// 定义子组件响应式数据const dau_money = ref(0);// 2-重点：通过$parent，拿到父组件暴露的数据与方法function borrow($parent: any) {// $parent 里就有父组件暴露的 money属性 和 borrowMoney()方法    // console.log($parent);     // 3-重点：调用父组件暴露的 borrowMoney()方法    dau_money.value += $parent.borrowMoney();    // 4-重点：可以查改父组件暴露的数据 money    console.log('父组件还有 $' + $parent.money);}