解决vue3父组件执行子组件方法报错：TypeError: Cannot read properties of null

组件执行子组件方法报错：TypeError: Cannot read properties of null"/>

解决vue3父组件执行子组件方法报错：TypeError: Cannot read properties of null

现象：

 父组件执行子组件的代码：

 原因： Vue3使用的所有变量除了来自父组件传值的props以外，其他的html绑定的所有本地变量都必须通过return导出！

这一点是vue3 最坑爹的一点。很容易忘记。

解决办法：使用toRefs解构state属性，并通过return导出

return {

...toRefs(state)  // 这句是关键，否则会报错Uncaught TypeError: Cannot read properties of null

}

但是这没完！

如果你通过.value获取ref对象，此时还是会报错：TypeError: Cannot read properties of null

为什么因为：通过toRefs解构出来的对象，不再需要.value获取值了！

toRefs 会将 ref 对象中的 .value 自动解构出来，因此你无需再使用 .value 来获取值。一旦使用 toRefs 解构，你可以直接访问属性的值。