vue 子组件访问父组件的方法

城永

于 2023-11-16 14:10:16 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/weixin_47133092/article/details/134440605

文章讲述了在Vue.js中，如何通过父子组件间的props和methods实现父组件的`fatherMethod`函数在子组件被点击时被调用。通过`<childfatherMethod=fatherMethod></child>`的模板语法展示，讲解了组件之间的通信机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template>
  <p>
    <child :fatherMethod="fatherMethod"></child>
  </p>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
<p>
<button @click="childMethod()">点击</button>
</p>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod() {
if (this.fatherMethod) {
this.fatherMethod();
}
}
}
};
</script>