子组件调用父组件的方法vue2

子组件调用父组件的方法在Vue2中有两种方法：
1. 通过$emit触发父组件传递过来的函数，将子组件的数据传递给父组件。
在子组件中使用this.$emit("父组件传递过来的函数","子组件数据")来触发父组件函数。父组件需要在模板中绑定子组件的自定义事件，并在methods中定义相应的函数来接收子组件传递的数据。
示例代码如下：
子组件：

<template>
  <div>
    <button @click="childFun">子组件按钮</button>
  </div>
</template>

<script>
export default {
  name: "child",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    childFun() {
      this.$emit("fatherMethod", "子组件数据");
    },
  },
};
</script>

<style lang='less' scoped>
</style>

父组件：

<template>
  <div>
    <child @fatherMethod="parentFun"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "parent",
  components: {
    Child,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    parentFun(data) {
      console.log(data);
    },
  },
};
</script>

<style lang='less' scoped>
</style>

2. 通过$parent调用父组件的方法。
在子组件中使用this.$parent.parentFun("子组件数据")来调用父组件的方法。需要注意的是，这种方法只适用于父组件和子组件之间的直接通信，如果存在多层嵌套，则需要使用$emit来触发事件。
示例代码如下：
子组件：

<template>
  <div>
    <button @click="childFun">子组件按钮</button>
  </div>
</template>

<script>
export default {
  name: "child",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    childFun() {
      this.$parent.parentFun("子组件数据");
    },
  },
};
</script>

<style lang='less' scoped>
</style>

父组件：

<template>
  <div>
    <child></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "parent",
  components: {
    Child,
  },
  data() {
    return {};
  },  created() {},
  mounted() {},
  methods: {
    parentFun(data) {
      console.log(data);
    },
  },
};
</script>

<style lang='less' scoped>
</style>