目录
一、vue常用组件通信方式
二.亲子组件通讯范例
2.1亲本基因
2.2 $emit/$on子传父子传父
2.3 .同步语法糖
三.兄弟汇编
3.1 $parent
3.2事件总线
3.3vuex
四.交叉类组件
4.1事件总线
4.2vuex
4.3提供/喷墨
另一方面，vue中常用的组件通信方式vue也是组件化开发框架，对于这种组件化开发来说，组件之间的通信方式通常非常重要
1.props2. $ emit/$ on3.$ children/$ parent4. $ attrs/$ listener S5.re F6.$ root7. event bus8. vue x2，父子组件通信
2 .子组件以props方式接收数据
2.2 $emit/$on父子遗传使用$emit ()触发更改数据
2.3 .sync语法糖：title.sync='total '等效于： title=' total ' v-on : update 3360 title=' total=$ event ' http://ww
templatedivdiv { { title } }/divel-button @ click=' parent msg=' changemessagebyparent ' ' change message/El-button child : parent data=' parent msg ' @ child event=' handle submit ' 3360 title.sync=' title '/child/div/div child.vue ' export default { components : { child }，data(}{return{parentmsg3360}我是父组件传递给子组件的值- proronents title: )。methods : { handle submit (childdata ) { this.parentMsg=childData } )，}，(}/script http://ww.Sina
template div div我是父组件的数据。 { { parent data } }/divdivel-button @ click=' chagepar
entMsg">通过.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.它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测 的方式发生变化
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>执行结果：