vue3组件通信的几种方式分别是这样的，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
vue3组件通信方式为以下几种
props
$emit
$expose / ref
$attrs
v-model
provide / inject
Vuex
mitt
props
<child :msg2="msg2" /><script setup> const props = defineProps({ // 写法一 msg2:String // 写法二 msg2:{ type:String, default:'' } }) console.log(props) // {msg2:'这是传级子组件的信息2'}</script>$emit
//Child.vue<template> // 写法一 <div @click="emit('myclick')">按钮</div> // 写法二 <div @click="handleClick">按钮</div></template><script setup> // 方法一 const emit = defineEmits(['myClick'],['myClick2']) // 方法二 const handleClick = () => { emit('myClick','这是发送给父组件的信息'); } // 方法二 不适用于vue3.2，使用的useContext()已经舍弃 import { useContext } from 'vue' const { emit } = useContext() const handleClick = () => { emit('myClick','这是发送给父组件的信息' }</script>// Parent.vue响应<template> <child @myClick="onMyClick"></child></template><script setup> import child from "./child.vue" import onMychilk = (msg) => { console.log(msg) // 父组件收到的信息 }</script>expose / ref
父组件获取子组件的属性或者调用子组件方法
<script setup> // 方法一：useContext() vue3.2 之后已经舍弃 import { useContext } from 'vue' const ctx = useContext() // 对外暴露属性方法等都可以 ctx.expose({ childName: '这是子组建的属性', someMethod(){ console.log('这是子组件的方法') } })</script>// Parent.vue 注意 ref="comp"<template> <child ref="comp"></child> <button @click="handleClick">按钮</button></template><script> import child from './child.vue' import { ref } from 'vue' const comp = ref(null) const handleClick = () => { console.log(comp.value.childName) comp.value.someMethod() // 调用子组件对外暴露的方法 }</script>attts
attrs:包含父作用域除class和style除外的非props属性集合
// 父组件<child :msg1="msg1" :msg2="msg2" title="3333"></child><script setup> import child from './child.vue' import { ref,reactive } from 'vue const msg1 = ref('111') const msg2 = ref('222')</script>// 子组件<script setup> import { defineProps,useContext,useAttars } from 'vue' const props = defineProps({ msg1: String }) // 方法1 const ctx = useContext() console.log(ctx.attars) // {msg2:'222',title:'333'} // 方法2 const attrs = useAttars() console.log(attars) // {msg2:'2222',title:'3333'}</script>v-model
可以支持多个数据双向绑定
<child v-model:key="key" v-modle:value="value" /><script> import child from './child.vue' import { ref,reactive } from 'vue' const key = ref('111') const value = ref('222')</script>//子组件<template> <button @click="handleClick"></button></template><script setup> // 方法一 v3.2 已被移除 import { useContext } from 'vue' const { emit } = useContext() // 方法二 import { defineEmits } from 'vue' const emit = defineEmits(['key','value']) //用法 const handleClick = () => { emit('update:key','新的key') emit('update:value','新的value') }</script>provide / inject
provide/inject为依赖注入provide：可以让我们指定想要提供给后代组件的数据inject:在任何后代组件中接受想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用
// 父组件 <script setup> import { provide } from 'vue' const name = provide('name') console.log('name','沐华') </script> //子组件 <script setup> import { inject } from 'vue' const name = inject('name') console.log(name) //木华 </script>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") // 直接使用 <template> <div> {{ $store.state.count }} </div> <button @click="$store.commit('add')"> </button> </template> // 获取 <script setup> import { useStore,computed } from 'vuex' const store = useStore() console.log(store.state.count) const count = computed (()=>store.state.count) console.log(count) </script>mitt
Vue3中已经没有了EventBus跨组件通信，替代方案mitt.js，但原理方式EventBus是一样的
安装方式 npm i mitt -S
封装
mitt.jsimport mitt from 'mitt'const mitt = mitt()export default mitt组件之间使用
// 组件A <script setup> import mitt from './mitt' const handleClick = () => { mitt.emit('handleChange') }</script>// 组件B <script setup>import mitt from './mitt'import { onUnmounted } from 'vue'const someMethod = () => {...}mitt.on('handleChange',someMethod)onUnmounted(()=>{ mitt.off('handleChange',someMethod)})</script>看完上述内容，你们掌握vue3组件通信的几种方式分别是这样的的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网行业资讯频道，感谢各位的阅读！
