方法一：组件通信_父传子_props（属性绑定）
在进行组件通信之前，我们首先要明确父和子是谁，父传子=>在父中引入子（被引入的是子）
1. 父传子，要先在子组件内定义props变量，准备接收，然后再使用变量
?2. 父组件内, 要展示封装的子组件：
先在<script>标签中引入子组件，并通过components注册局部组件后使用子组件，在标签中以属性方式给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>