vue父组件向子组件传递函数方法

最新推荐文章于 2025-03-21 17:05:32 发布

原创最新推荐文章于 2025-03-21 17:05:32 发布 · 1.1w 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

59 篇文章 6 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

父组件

<template>
  <div>
    parent
    <child :parentHandler="parentHandler" />
  </div>
</template>
<script>
import child from "@/components/child";
export default {
  components: { child },
  data() {
    return {};
  },
  methods: {
    parentHandler() {
      console.log("这是父组件的方法");
    },
  },
};
</script>

子组件

<template>
  <div>
    child
    <button @click="handler">这是子组件的按钮</button>
  </div>
</template>
<script>
export default {
  props: {
    parentHandler: {
      type: Function,
      default: () => {
        return Function;
      },
    },
  },
  methods: {
    handler() {
      this.parentHandler();
    },
  },
};
</script>