Vue组件间通信，子传父方法（基础用法）

一、父组件中创建一个方法接收参数，子组件调用并传递参数

1.父组件在methods中创建一个方法，并传递给子组件

<template>
  <div>
    <!-- 2.将方法传入子组件中-->
    <Children :getChildrenData="getChildrenData" />
  </div>
</template>

<script>
import Children from "./components/Children.vue";

export default {
  name: "App",
  components: {
    Children,
  },
  methods: {
    // 1.创建方法，接收参数
    getChildrenData(data) {
      console.log("我是APP父组件，我收到了数据", data);
    },
  },
};
</script>

2.子组件声明接收此方法，并在合适的时机调用，将数据传递

<template>
  <div>
    <!-- 点击事件，点击时将数据传递给父组件-->
    <button @click="submitData">点击将name数据传递给APP父组件</button>
  </div>
</template>

<script>
export default {
  name: "Children",
  props: ["getChildrenData"], // 1.子组件进行接收
  data() {
    return {
      name: "张三",
    };
  },
  methods: {
    submitData() {
      // 2.在方法中进行调用
      this.getChildrenData(this.name);
    },
  },
};
</script>

3.点击后控制台打印