方法一：组件通信_父传子_props（属性绑定）

在进行组件通信之前，我们首先要明确父和子是谁，父传子=>在父中引入子（被引入的是子）

1. 父传子，要先在子组件内定义props变量，准备接收，然后再使用变量

2. 父组件内, 要展示封装的子组件：

先在<script>标签中引入子组件，并通过components注册局部组件后使用子组件，在标签中以属性方式给props变量传值

方法二：组件通信_子向父_自定义事件（事件绑定）

在了解子向父通信之前我们要先知道单向数据流，从父到子的数据流向, 叫单向数据流

Vue中规定props里的变量, 本身是只读的，而直接对子组件进行修改, 不通知父级, 造成数据不一致性，所以在子向父通信中，我们需要通过子组件触发父自定义事件方法实现

实现效果：

需求：点击子组件中的砍价按钮，修改父组件中的价格（在父向子的基础上实现代码）

1.在子组件中添加button按钮并为按钮添加点击事件

2.在子组件中为props添加index属性，并通过this.$emit（“自定义事件名”，实参）触发父组件绑定的自定义事件，导致父methods里事件处理函数被触发执行

3.父组件内补充索引内容, 父 -> 索引 -> 子组件 (用于区分哪个子组件)，然后绑定自定义事件和事件处理函数,语法: @自定义事件名="父methods里函数名"

完整代码：

父：App.vue

<template><div><!-- 目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入需求: 每次组件显示不同的数据信息步骤(口诀):1. 子组件 - props - 变量 (准备接收)2. 父组件 - 传值进去--><Product v-for="(obj,ind) in list" :key="ind" :title="obj.proname" :price="obj.proprice" :art="obj.info" :index="ind" @jianyi="fn"></Product></div>
</template><script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProductSon.vue'
export default {data(){return {str: "全栈开发，你必须拥有",list: [{ id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },{ id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },{ id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
],}},// 3. 注册组件components: {// Product: Product // key和value变量名同名 - 简写Product},methods: {// 子组件每点击一次按钮价格，父组件中对应的价格就减一fn(index,num) {// 如果父组件中点击的list单价<1就不再减少this.list[index].proprice>1&&(this.list[index].proprice=(this.list[index].proprice-num).toFixed(2))}},
}
</script><style></style>

子：MyProductSon.vue

<template><div class="my-product"><h3>标题:{{title}}</h3><p>价格:{{price}}元</p><p>{{art}}</p><button @click="fn">砍价-1</button></div>
</template><script>
export default {props:['title','price','art','index'],methods: {fn() {// this.index是子组件props中index属性在父组件对应的索引值//kanjia是自定义的事件名，需要与父组件中事件名一致this.$emit('kanjia',this.index,1)}},
}
</script><style scoped>
.my-product {width: 400px;padding: 20px;border: 2px solid #000;border-radius: 5px;margin: 10px;
}
</style>

方法三：跨组件通信EventBus（兄弟组件通信）

需求：点击sonB按钮修改sonA中的值

实现步骤：

1.在src/EventBus/index.js 路径处– 创建空白Vue对象并导出

// 创建空白vue对象并导出 [作为事件总线]
import Vue from "vue";
export default new Vue();

2.在components文件夹中分别创建要跨组件通信的两个兄弟组件

3.为兄弟组件设置相应的内容后确定传递数据与接收数据的组件

传递数据组件：sonB.vue 接收数据组件：sonA.vue

4.在App.vue文件中引入局部组件，完成创建并使用

<template><div><!-- 第三步：在template中使用组件 --><sonA></sonA><sonB></sonB></div>
</template><script>
// 第一步：分别引入sonA和sonB组件
import sonA from './components/sonA.vue'
import sonB from './components/sonB.vue'
export default {// 第二步：通过components创建组件components:{sonA,sonB}
}
</script><style scoped></style>

5. 在要传递值的组件(sonB.vue)中引入事件总线EventBus，并通过EventBus.$emit('自定义事件名',要传递的参数)将内容传到sonA.vue中

<template><div><p>sonB</p><button @click="fn">点我改变sonA的值</button></div>
</template><script>
import EventBus from '../EventBus/index.js'
export default {name:'sonB',methods: {fn() {EventBus.$emit('bian','跟我走')}},
}
</script><style scoped>div {width: 200px;height: 100px;border: 1px solid red;}
</style>

6.在要接收值的组件(sonA.vue) 中引入事件总线EventBus并通过created中EventBus.$on('事件名', 函数体)完成内容修改

<template><div><p>sonA</p><p>{{msg}}</p></div>
</template><script>
import EventBus from '../EventBus/index'
export default {name:'sonA',data() {return {msg:'aaa'}},created() {EventBus.$on('bian',(val)=>{this.msg=val})},
}
</script><style scoped>div {width: 200px;height: 100px;border: 1px solid red;}
</style>

Vue组件通信：父传子、子传父、跨组件通信相关推荐

【朝花夕拾】Android跨进程通信总结篇
前言原文:https://www.cnblogs.com/andy-songwei/p/10256379.html 只要是面试高级工程师岗位,Android跨进程通信就是最受面试官青睐的知识点之一. ...
【朝花夕拾】Android性能篇之（七）Android跨进程通信篇
前言转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10256379.html],谢谢! 只要是面试高级工程师岗位,Android跨进程通信就是最受面 ...
【朝花夕拾】Android性能篇之（七）Android跨进程通信篇...
前言原文:https://www.cnblogs.com/andy-songwei/p/10256379.html 只要是面试高级工程师岗位,Android跨进程通信就是最受面试官青睐的知识点之一. ...
Android跨进程通信Binder机制与AIDL实例
文章目录进程通信 1.1 进程空间划分 1.2 跨进程通信IPC 1.3 Linux跨进程通信 1.4 Android进程通信 Binder跨进程通信 2.1 Binder简介 2.2 Binder ...
两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？
引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有些时候,我们希望能在这些" ...
Android的跨进程通信
Android系统的跨进程简介为什么不能直接跨进程通信? 为了安全考虑,应用之间的内存是无法互相访问的,各自的数据都存在于自身的内存区域内. 如何跨进程通信? 要想跨进程通信,就要找到一个大家都能访 ...
如何在vue 中使用组件，以及组件通信的方式（父传子/子传父/兄弟传）
文章目录前言零.如何使用封装组件一.为什么需要下面的通信方式二.父组件给子组件通信三.子组件给父组件通信四.兄弟组件通信五.多层组件之间的通信总结前言组件可以说是 vue 中最为核 ...
Vue组件之间的通信-父传子-子传父
文章目录 Vue的组件嵌套 Vue组件间通信 1.父组件传递给子组件 1.1数组的方式 1.2对象的方式 2.子组件传递给父组件 Vue的组件嵌套前面我们是将所有的逻辑放到一个App.vue中: 在 ...
EOS系列 - EOSIO 跨链通信
跨链通信使一个区块链能够以可证实的安全方式验证另一个区块链上事件的真实性,目标是让区块链之间的通信像智能合约之间的内部链式沟通一样安全. 轻量级的默克尔树证明比特币的SPV(简单支验证) EOS引入 ...

Vue组件通信：父传子、子传父、跨组件通信

方法一：组件通信_父传子_props（属性绑定）

方法二：组件通信_子向父_自定义事件（事件绑定）

方法三：跨组件通信EventBus（兄弟组件通信）

需求：点击sonB按钮修改sonA中的值

Vue组件通信：父传子、子传父、跨组件通信相关推荐

最新文章

热门文章