一、vue常用组件通讯方式

vue也是组件化开发框架,对于这种组件化开发来说,组件之间的通信方式通常都是非常重要的

1.props
2.$emit/$on
3.$children/$parent
4.$attrs / $listeners
5.ref
6.$root
7.eventBus
8.vuex

二、父子组件通讯示例

2.1 props 父传子

父组件以属性的方式传值给子组件??
2.子组件通过props方式接收数据

2.2 $emit/$on 子传父子传父

使用 $emit() 触发更改数据

2.3 .sync语法糖

:title.sync ="total"
等价于
:title= "total" v-on:update:title="total =$event"

父组件代码：

<template>
  <div>
    <div>{{title}} </div>
    <el-button @click="parentMsg='changeMessage by Parent'">changeMessage</el-button>
    <Child :parentData="parentMsg" @childEvent="handleSubmit" :title.sync='title'></Child>
  </div>
</template>
<script>
import Child from './child.vue'
export default {
  components: { Child },
  data() {
    return {
      parentMsg: '我是父组件向子组件传递的值-props方式',
      title: '这是主页面',
    }
  },
  methods: {
    handleSubmit(childData) {
      this.parentMsg = childData
    },
  },
}
</script>

子组件代码：

<template>
  <div>
    <div>我是父组件的数据：{{parentData}}</div>
    <div>
      <el-button @click="chageParentMsg">通过.sync修改parentMessage</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    parentData: {
      type: String,
      default: '',// 通过props接收父组件的值
    },
  },
  data() {
    return {}
  },
  methods: {
    chageParentMsg() {
      this.$emit('update:title', '通过.sync修改parent title')
      // 使用 $emit() 触发更改数据
      this.$emit('childEvent', '通过emit修改parentMessage')
    },
  },
}
</script>

三、兄弟组件

3.1 $parent

3.2?eventBus

在需要进行通信的组件中引入

import { EventBus } from "../bus.js"
export default{
  data(){
    return{}
  },
  methods:{
    changeName(){
      EventBus.$emit("editName", 'emit信息')
    }
  }
}
</script>

监听事件

<script>
import { EventBus } from "../bus.js"
export default{
  data(){
    return{}
  },
  mounted:{
    EventBus.$on('editName',(name)=>{
      console.log(name) // 俺的小破站！
    })
  }
}
</script>

3.3?vuex

四、跨级组件

4.1?eventBus

4.2?vuex

1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
2.它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测?的方式发生变化

4.3?provide/inject

provide / inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深(普通组件传值只能父子或兄弟关系)，并在起上下游关系成立的时间里始终生效。

父组件代码：

<template>
  <div>
    <div>{{title}} </div>
    <el-button @click="parentMsg='changeMessage by Parent'">changeMessage</el-button>
      <Inject></Inject>
    <el-row>
      <el-button @click="changeMsg()">改变provide的值</el-button>
    </el-row>
  </div>
</template>
<script>
import Inject from './inject.vue'
export default {
  components: {  Inject },
  // provide() {
  //   //重要一步，在父组件中注入一个变量或函数
  //   return {
  //     msg: '通过provide传递的信息',
  //     // 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
  //   }
  // },
  provide: function () {
    return {
      nameFromParent: this.parentMsg,
      getParentName: () => this.parentMsg,
    }
  },
  data() {
    return {
      parentMsg: '我是父组件向子组件传递的值',
      title: '这是主页面',
    }
  },
  methods: {
    changeMsg() {
      this.parentMsg = 'provide new value'
    },   
  },
}
</script>

跨级组件代码inject：

<template>
  <div>
    provide原始数据：{{nameFromParent}}
    <br>
    provide更新后的数据：{{receiveParent}}
  </div>
</template>
<script>
export default {
  inject: ['nameFromParent', 'getParentName'],
  computed: {
    receiveParent() {
      return this.getParentName()
    },
  },
  watch: {
    receiveParent: function (val) {
      console.log('来自Parent组件的name值发生了变化', val)
    },
  },
  created() {
    console.log(this.nameFromParent)
  },
}
</script>

执行结果：