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

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

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

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

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

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

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

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

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

实现效果：

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

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

扫描二维码关注公众号，回复： 13335257 查看本文章

 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>