vue子组件调用父组件方法 代码怎么写

在Vue中，子组件可以通过两种方式调用父组件的方法。第一种方式是通过在子组件中使用`this.$emit()`方法触发父组件传递过来的函数，代码如下：

<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>

第二种方式是通过在子组件中使用`this.$parent`来访问父组件的方法，代码如下：

<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>

其中，`fatherMethod`和`parentFun`是父组件中定义的方法名，子组件通过这两种方式都可以调用到父组件中的方法。