一起学Vuejs（十二）----- 父子组件通信（emit）

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

父子组件通信——子传父：

通过 this.$emit 提交一个事件，将子组件的行为或者数据告诉父组件

 

• 修改父组件的值

1. 创建一个子组件 Child.vue

<template>
  <div class="my-child">
    <h5>我是子组件，我可以通过属性props来接收父组件传过来的年龄值是:{{deliverParentAge}}，这是一个数字类型</h5>
    <h5>并且，我要告诉他，他今年生日已经过了，所以他的年龄应该<button @click="AddAge">加1</button></h5>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childAge: 27
    };
  },
  props: {
    deliverParentAge: Number
  },
  // 新建一个计算属性，将父组件原来的值加1
  computed: {
    parentActualAge() {
      return this.deliverParentAge + 1;
    }
  },
  methods: {
    AddAge() {
      this.$emit("addParentAge", this.parentActualAge);
    }
  }
};
</script>

 

2. 创建父组件，通过 v-on 来监听子组件提交的事件 addParentAge；

addParentAge是子组件提交的事件名称，也是父组件通过v-on监听的事件名称，而handleAddParentAge是父组件自定义的方法名称

<template>
  <div class="my-parent">
    <h3>我是父组件，我想告诉我的子组件，我的年龄值是:{{parentAge}}</h3>
    <h3>我要通过v-bind绑定一个属性parentAge，告诉子组件我的年龄值是:{{parentAge}}</h3>
    <!-- 下面就是我的子组件 -->
    <my-child :deliverParentAge="parentAge"
            @addParentAge="handleAddParentAge"></my-child>
  </div>
</template>

<script>
import MyChild from "./Child";
export default {
  components: { MyChild },
  data() {
    return {
      parentAge: 49
    };
  },
  methods: {
    handleAddParentAge(actualAge) {
      console.log("父组件的实际年龄是：", actualAge);
    }
  }
};
</script>

 

• 将子组件data中的值，提交给父组件

1. 创建子组件 Child.vue

<template>
  <div class="my-child">
    <h5>我是子组件，我可以通过属性props来接收父组件传过来的年龄值是:{{deliverParentAge}}，这是一个数字类型</h5>
    <h5>现在我要告诉父组件，我的年龄是{{childAge}}</h5>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childAge: 27
    };
  },
  props: {
    deliverParentAge: Number
  },
  methods: {
    DiffAge() {
      this.$emit("differAge", this.childAge);
    }
  }
};
</script>

 

2. 父组件通过 v-on 监听子组件提交的事件 differAge

<template>
  <div class="my-parent">
    <h3>我是父组件，我想告诉我的子组件，我的年龄值是:{{parentAge}}</h3>
    <!-- 下面就是我的子组件 -->
    <my-child :deliverParentAge="parentAge"
            @differAge="handleDifferAge"></my-child>
    <h3>通过监听子组件提交的事件addParentAge，我知道到了自己的实际年龄应该是:
  </div>
</template>

<script>
import MyChild from "./Child";
export default {
  components: { MyChild },
  data() {
    return {
      parentAge: 49
    };
  },
  methods: {
    handleDifferAge(child) {
      console.log("子组件年龄是：", child);
    }
  }
};
</script>

 

 

博客借鉴：https://www.cnblogs.com/shengnan-2017/p/10419050.html