Vue 父组件调子组件方法[不参数版]

原创已于 2022-11-14 15:41:20 修改 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-11-14 15:19:32 首次发布

Vue 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了Vue.js中父子组件如何进行事件通信。通过示例展示了子组件定义方法`childEvent`，然后在父组件中通过`$refs`调用该方法实现交互。这种通信方式在Vue应用开发中非常常见，有助于理解组件间的协作。

子组件

<template>
  <div>
    
  </div>
</template>
<script>
  export default {
    methods: {
      childEvent() {
        alert("我是子组件方法");
      }
    }
  };
</script>

父组件

<template>
  <div>
    <child ref="child"/>
  </div>
</template>
<script>
  import child from './child';
  export default {
    components: {
      child
    },
    methods: {
      parentEvent() {
        this.$refs.child.childEvent();
      }
    }
  };
</script>