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

原创于 2023-11-16 14:10:16 发布 · 141 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

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

父组件

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