vue3 父子组件传参,provide/inject 共享方法和参数,父组件调用子组件方法,子组件调用父组件方法

一、父组件给子组件传参 props

props 用法 vue props:{ xxxx: { type: Object, default:null } }

以下有注释的部分是需要写的代码

以下例子是父组件（列表页）加载公共的操作按钮

子组件.vue
以设置权限为例

父组件.vue

二、父组件调用子组件方法

关键步骤都在父组件中。

1. 在 html 中加载组件 html，然后在 html 中添加 ref='xxx'
2. 获取子组件对象 const xxx = ref(null)
3. 在父组件的 return 中返回 xxx
   ：这里的 xxx 都是相同的名字

子组件.vue

父组件.vue
父组件调用子组件的显示弹框方法 howEdit

三、provide/inject 父组件跨子组件共享传参和方法

父组件中定义 provide，发送参数
子组件中定义 inject，获取参数
这里碰到一个问题，provide 发送的数组对象 inject 接收后都是 proxy 类型的，需要 toRaw 将其转移才能调用。有别的好办法请留言谢谢~~~

父组件.vue

子组件.vue

四、子组件调用父组件方法 emits

子组件调用父组件方法，实际上是子组件调用父组件传入子组件的方法。

子组件.vue

父组件.vue