Vue组件通信：子传父的简易理解

子传父最常用的方法是使用$emit

父组件

<template>
  <div id="App">
    <div>父组件</div>
    <child @childClick="parentClick"></child>
    <div>{{parentMessage}}</div>
  </div>
</template>
<script>
import Child from "./components/Child"
export default {
  name: "App",
  components: {
    Child
  },
  data() {
    return {
      parentMessage:''
    };
  },
  methods: {
    parentClick(message){
    //将子组件传过来的数据赋给父组件中的data
      this.parentMessage=message	
    }
  },
};
</script>

子组件

<template>
  <div class="content">
    <span>子组件</span>
    <button @click="childClick">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childMessage: "我是子组件的数据",
    };
  },
  methods: {
    childClick() {
      this.$emit("childClick", this.childMessage);
    },
  },
};
</script>

下面画一张图来简单理解子传父的过程

当我点击按钮时，会触发父组件上的监听事件childClick，顺带把this.childMessage参数传递给了父组件中定义的parentClick事件，由parentClick接受子组件传来的参数

• $emit的第一个参数是在父组件中需要监听的事件名称（这个可以自定义起名），笔者在父组件中起的事件名称是childClick
• $emit的第二个参数是可选的，可传可不传