首页 > 其他分享 >vue3祖孙组件间通信

vue3祖孙组件间通信

时间:2023-02-23 15:01:41浏览次数:28  
标签:provide car 间通信 vue3 组件 祖孙

作用:实现祖孙组件间通信

父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据

具体写法:

1.祖组件中:

 setup(){
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
 }

2. 孙组件中:

 setup( props, context ){
    const car = inject('car') 
   return {car} }

标签:provide,car,间通信,vue3,组件,祖孙
From: https://www.cnblogs.com/lucky06y/p/17147953.html

相关文章

  • 【Vue】vue2 vue3 实现 scale 缩放大屏自适应
    vue3例子App.vuetemplate<divclass="screen-wrapper"><divclass="screen"id="screen"><router-view/></div></div>scriptimport{onMou......
  • vue3+antd+jsx 实现表格行数据排序的动画效果
    ------------恢复内容开始------------vue3的写法转载https://blog.csdn.net/qq_51898604/article/details/128973430因为ant-design表格组件没有封装拖拽排序的方法,需......
  • Vue3自定义指令
    Vue3自定义指令自定义指令的定义:自定义指令是用来操作DOM的,尽管vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和拓展,不仅仅......
  • vue3的element plusd的全局注册的dialog的弹窗空白区域点击无法关闭
    在main.js里面注册//全局修改默认配置,点击空白处不能关闭弹窗app._context.components.ElDialog["props"].closeOnClickModal.default=false//全局修改默认配置,按......
  • vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-scr
    目录vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-scriptsetup的作用和lang=ts-vue后台管理模板昨日内容回顾今日内容概要今日内容详......
  • vue3.x基本使用
    今日内容vue3介绍#1vue项目的版本新项目使用vue3有部分来项目使用2#vue3的变化1.性能的提升 -打包大小减少41% -初次渲染快55%,更新渲染快133%......
  • vue框架08 vue3
    vue3的介绍#vue项目的版本,新项目使用vue3,部分老项目使用vue2#vue3的变化1.性能的提升-打包大小减少41%-初次渲染快55%,更新渲染块133%......
  • vue_day08 vue3基本使用了解
    目录今日内容详细一、vue3介绍二、vue3创建项目1.使用vue-cli2.vite三、setup函数1.scriptsetup的作用和lang=ts四、ref和reactive五、计算属性和监听属性1.计算属性2.......
  • vue3介绍 vue3创建项目 扩展vite setup函数 ref和reactive 计算属性和监听属性 生命周
    目录回顾vue3介绍vue的变化组合式API与配置项APIvue3创建项目扩展之vite使用步骤setup函数ref和reactiverefreative总结:计算属性和监听属性计算属性获取get 修改set监听属......
  • Vue3
    目录Vue3vue3介绍vue3创建项目1.使用vue-cli创建2.vite创建vue项目setup函数1.setup函数2.vue2的创建vue实例和vue3创建vue实例的区别ref和reactivecomputed计算属性watc......