Vue3 父子组件传值和互调方法

1. 父组件代码:

const childComp = ref(null);      //传给子组件的ref

const to_child = reactive({        //传给子组件的值，这里是对象，也可以传普通数据类型，数组等
      id : "",
      name: ""
})

const handleComp= (param)=>{//传给子组件的方法，让子组件调用
  console.log('子组件让我执行，传来参数' + param);
}

下面的代码演示如何传给子组件:

<child ref="childComp " :to_child ="to_child" :handleComp="handleComp" />

2. 子组件代码:

let props  = defineProps({//接收父组件传来的值
        to_child : {
            type: Object, //根据传过来的类型，比如Number, String等，数组[]也是Object
            default: ()=>{} //默认值
        },
        handleComp:{   //这是父组件传过来的方法
                type: Function
        }        
});

子组件如何使用：

1. 对于值：

props.to_child.id, 
props.to_child.name....

2. 对于方法: 

props.handleComp('')

调用父组件方法并传值 (参数为空则不传值)

让父组件执行的方法

defineExpose({
        onload
    });

const onload = ()=>{
        console.log('父组件让我执行');

    };

父组件如何使用：通过

childComp.value.onload()

调用

实际项目中发现了两个问题：

1.与element plus结合使用时， 如果子组件在父组件的dialog里，父组件通过点击按钮显示dialog，第一次显示时，childComp对象会空，导致子组件方法无法被调用，第二次及以后childComp就正常了。找不到原因，修改成把dialog放入子组件里解决。

2.子组件调用父组件方法，我这里没有推荐emit方法，因为我发现子组件@click="$emit(...)"，是可以用的，但是我这里的需求是，不通过子组件点击按钮去调用父组件，而是放在一个axios请求结束后调用，出现了emit不工作，还报各种undefine，cannot read之类的错，没有找到解决方法。

最后修改为props方式解决，就是文章中的方式

说点题外话：

我的代码都是经过我自己在实际项目中测试过的，不像有的人，就从别人的文章那里copy代码，他自己都没有跑通过。

或者只是测试了很简单简单的应用场景，就觉得OK了然后发出来，结果稍微换个复杂点的场景就会遇到各种问题。