vue组件间常用的几种通信方式

第一种方式：props

这种通信方式适用与父向子传递数据

//父组件

这样我们的子组件就能拿到父组件传递过来的数据，并把它渲染上页面：

// 子组件

页面显示：

第二种方式：$emit和$on

这种方式适合于任意组件件通信，这里我们演示兄弟之间通信

// 父组件

子组件1号

子组件2号

效果

第三种方法：全局事件总线

这种方法也可以实现任意组件间通信，具体操作如下
首先安装全局事件总线：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this //安装全局事件总线，所有组件都能看到$bus
  }
}).$mount('#app')

// 父组件

// 子组件1号

// 子组件2号

效果

第四种方法：vuex

什么是vuex？
用官网的话说：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
本质：就是帮助我们管理我们的公共数据，任何组件都可以访问得到这些数据
下面我们来演示一下vuex得用法：

// 安装vuex
npm i vuex

在src目录下建立一个store

然后新建一个index.js，用来写我们vuex里面得代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//准备state——用于存储数据
const state = {
    msg:''
}

//准备mutations——用于操作数据（state）
const mutations={
    send(state,value){
        state.msg = value
    }
}
//创建并暴露store
export default new Vuex.Store({
	mutations,
	state,
})

接下来就是来使用我们得vuex，第一步先在main.js引入我们写好得store文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import store from './store'

new Vue({
  render: h => h(App),
  store,
  beforeCreate(){
    Vue.prototype.$bus=this //安装全局事件总线，所有组件都能看到$bus
  }
}).$mount('#app')

第二步，使用我们的store

// 父组件

// 子组件2

效果

这样子组件2，就能访问到子组件1保存进vuex里面的数据了

总结：这就是我总结的组件件通信的四种常用的方法，可能会有写的不好的地方，我们一起努力！~