千家信息网

vue3组件通信的几种方式分别是这样的

发表于:2024-11-15 作者:千家信息网编辑
千家信息网最后更新 2024年11月15日,vue3组件通信的几种方式分别是这样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。vue3组件通信方式为以下几种props$emit$
千家信息网最后更新 2024年11月15日vue3组件通信的几种方式分别是这样的

vue3组件通信的几种方式分别是这样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

vue3组件通信方式为以下几种

  • props

  • $emit

  • $expose / ref

  • $attrs

  • v-model

  • provide / inject

  • Vuex

  • mitt

props
$emit
//Child.vue// Parent.vue响应
expose / ref

父组件获取子组件的属性或者调用子组件方法

// Parent.vue 注意 ref="comp"
attts

attrs:包含父作用域除class和style除外的非props属性集合

// 父组件// 子组件
v-model

可以支持多个数据双向绑定

//子组件
provide / inject

provide/inject为依赖注入 provide:可以让我们指定想要提供给后代组件的数据 inject:在任何后代组件中接受想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用

    // 父组件        //子组件    
Vuex
   //store/index.js   import { createStore } from 'vuex'   export default createStore({       state:{count:1},       getters:{           getCount:state=>state.count       },       mutations:{           add(state){               state.count++           }       }      })    // main.js    import { createApp } from 'vue'    import APP from './App.vue'    import store from './store'    createApp(APP).use(store).mount("#app")        // 直接使用            // 获取    
mitt

Vue3中已经没有了EventBus跨组件通信,替代方案mitt.js,但原理方式EventBus是一样的
安装方式 npm i mitt -S
封装

mitt.jsimport mitt from 'mitt'const mitt = mitt()export default mitt

组件之间使用

// 组件A // 组件B 

看完上述内容,你们掌握vue3组件通信的几种方式分别是这样的的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!

0