vue组件间通讯、数据传递（父子组件，同级组件）

总结一下对vue组件通讯的理解和使用。

1、组件目录结构

• 父组件：app.vue
• 子组件：page1.vue
• 子组件：page2.vue

父组件 app.vue

<template>
  <div id="app">
    <p>请输入单价: <input type="text" v-model="price"></p>
    <page1 :price="price" @downPrice="downPrice"></page1>
    <page2></page2>
  </div>
</template>

<script>
import Page1 from "./components/page1";
import Page2 from "./components/page2";
export default {
  name: "App",
  data() {
    return {
      price: ""
    };
  },
  components: {
    Page1,
    Page2
  },
  methods: {
    downPrice() {
      this.price = (this.price - 1).toString();
    }
  }
};
</script>

子组件 page1.vue

<template>
    <div>
        <p><span>单价：</span><span>{{price}}</span> <button @click="downPrice">降价1元</button></p>
        <p>数量: {{count}} </p>
        
    </div>
</template>
<script>
import bus from  '../eventBus.js'
export default {
    props:{
        price:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            count:10
        }
    },
    methods:{
        downPrice(){
            this.$emit('downPrice')
        }
    },
    watch:{
       price(newPrice){
          bus.$emit('priceChange',newPrice,this.count) 
       } 
    }
}
</script>

子组件 page2.vue

<template>
    <div>
        <p>
            <span>总金额：{{totalMoney}}元 </span>剩余金额：
            <span>{{balance}}元</span>
        </p>
    </div>
</template>
<script>
import bus from "../eventBus.js";
export default {
  data() {
    return {
      balance: 1000,
      totalMoney: 1000
    };
  },
  mounted() {
    bus.$on("priceChange", (price, count) => {
      this.balance = this.totalMoney - price * count;
    });
  }
};
</script>

2、通讯过程介绍

1.父组件向子组件传值

1.1在父组件中引入须要通讯的子组件

import Page1 from "./components/page1";

1.2 在父组件的components中注册该子组件

components: {
    Page1
  }

1.3 在父组件的template中使用子组件

<page1></page1>

1.4 将须要传递给子组件的值经过v-bind(若是传递的是固定值，则不须要v-bind，直接属性名，属性值传递便可)。

<page1 :price="price"></page1>

//  此处的price则是传递给子组件的值

1.5 在对应的子组件中，经过props属性接收传递过来的值

props:{
        price:{
            type:String,
            default:''
        }
  }

1.6 在子组件中使用该值

<p><span>单价：</span><span>{{price}}</span></p>

2.子组件向父组件中传值

2.1 在page1.vue中，经过触发子组件的方法(这里是自定义的downPrice方法),

<p><span>单价：</span><span>{{price}}</span> <button @click="downPrice">降价1元</button></p>

2.2 在子组件的methods的downPrice中，经过this.$emit(),将事件和参数传递给父组件

downPrice(count){
            this.$emit('downPrice',count)
  }

// downPrice 是传递给父组件的事件，父组件触发并相应这个方法
// count 传递给父组件的参数，在父组件中，能够对和这个参数进行相应操做

2.3 在父组件中接受子组件传递的事件downPrice和数据

<page1 :price="price" @downPrice="downPrice"></page1>

2.4 父组件对接收到的事件和数据作出响应

downPrice(count) {
      this.price = (this.price - 1).toString();
      // this.price = (this.price - count).toString();
    }

三、父组件调用子组件方法

方法一：

3.1 在使用子组件时，给子组件加一个ref引用

<page1 :price="price" @downPrice="downPrice" ref="page1"></page1>

3.2 父组件经过this.$refs便可找到该子组件，也能够操做子组件的方法

this.$refs.page1.子组件方法

打印出获取到的子组件信息：

方法二：

3.3 经过$children,能够获取到全部子组件的集合

this.$children[0].某个方法

四、子组件调用父组件方法

4.1 经过 $parent能够找到父组件，进而调用其方法

this.$parent.父组件方法

打印出的父组件信息

五、平级组件通讯

同级组件不能直接传值，须要一个中间桥梁，能够先将数据传递给公共的父组件，而后父组件再将数据传递给须要的子组件。

5.1 定义一个公共文件 eventBus.js

代码很简单(就2句)，只是建立一个空的vue实例

import Vue from 'vue'
export default new Vue()

5.2 在须要通讯的同级组件中分别引入eventBus.js文件

import bus from  '../eventBus.js'

5.3 在page1.vue中，经过$emit将事件和参数传递给page2.vue

price(newPrice){
          bus.$emit('priceChange',newPrice,this.count) 
}

5.4 在page2.vue 中，经过$on接收接收参数和相应事件

bus.$on("priceChange", (price, count) => {
      this.balance = this.totalMoney - price * count;
    });

通常大型的项目，推荐使用Vuex来管理组件之间的通讯

若是对道友你有帮助，请收藏和点赞，若是以为有问题，欢迎留言指出，demo查看