vue非父子组件、兄弟组件之间的传值通信

快来打我* 2022-10-17 00:48 254阅读 0赞

一般来说在vue项目里面的父、子组件间的传值很容易理解，父传子无非就是在子组件里面用`props`来显示的声明父组件传递的属性，例如：

子组件：

<template>
    	<div class="not-found">
    		{ {  message }}
    	</div>
    </template>
    
    <script>
    	props: ['message'],
        export default { 
    
        }
    </script>

在父组件里面

<template>
    	<div class="not-found">
    		<child :message="someThing"></child>
    	</div>
    </template>
    
    <script>
    	props: ['message'],
        export default { 
    		data() { 
    			return { 
    				someThing: '这是要传递的信息'
    			}
    		}
        }
    </script>

如果子组件要向父组件传值

this.$emit('getMessage', 'aaa')
    // getMessage为父组件里定义的方法名，aaa为要传递的值

然后在父组件里面

methods: { 
    	getMessage(val) { 
    		console.log(val) // aaa
    	}
    }

以上讲的是父子组件间的传值

兄弟组件之间的传值如下  
需要建立一个通信总件`bus.js`  
在`src`目录下面建立一个`utils`文件夹，在`utils`文件夹下建一个`bus.js`的文件，内容如下：

// bus.js
    import Vue from 'vue'
    const Bus = new Vue()
    export default Bus

然后在`main.js`里面将其引入

// 引入通信总件，用于非父子组件间的传值
    import Bus from '@/utils/bus'
    // 并将其挂载到vue的原型上
    Vue.prototype.$bus = Bus

最后就是在兄弟组件之间一个使用

this.$bus.$emit('事件名A', '传递的信息')

来进行传递