vue3组合式组件通信方式总结

1.props--只读(父传子)

父组件:

vue3组合式组件通信方式总结_第1张图片

子组件:

vue3组合式组件通信方式总结_第2张图片

 2.自定义事件--子传父

父组件:

vue3组合式组件通信方式总结_第3张图片

vue3组合式组件通信方式总结_第4张图片

 子组件:

vue3组合式组件通信方式总结_第5张图片

3.全局事件总线--bus(兄弟组件传值)

安装mitt(npm网站中可查询---https://www.npmjs.com/package/mitt)

组件传值:emit

vue3组合式组件通信方式总结_第6张图片

组件接收值:on

vue3组合式组件通信方式总结_第7张图片

配置bus:

vue3组合式组件通信方式总结_第8张图片

 4.父子组件同步:v-model

父组件:

自定义事件+props=v-model使用

vue3组合式组件通信方式总结_第9张图片

 多个v-model:

vue3组合式组件通信方式总结_第10张图片

子组件:

vue3组合式组件通信方式总结_第11张图片

5.useAttrs(父传子)

vue3组合式组件通信方式总结_第12张图片

 6.ref和$parent

6.1ref

父组件:

vue3组合式组件通信方式总结_第13张图片

子组件:

vue3组合式组件通信方式总结_第14张图片 

 

6.2$parent

父组件:(要使用子组件)

vue3组合式组件通信方式总结_第15张图片

 

子组件:

vue3组合式组件通信方式总结_第16张图片

 

7.provide和inject

祖先组件:

vue3组合式组件通信方式总结_第17张图片

 

后代组件:

vue3组合式组件通信方式总结_第18张图片

 8.pinia状态管理(Pinia 中文文档)

9.插槽

你可能感兴趣的:(javascript,前端,开发语言)