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

最新推荐文章于 2025-03-24 08:30:00 发布

最新推荐文章于 2025-03-24 08:30:00 发布 · 265 阅读

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue应用中实现子组件与父组件之间的通信，通过`$refs`和方法调用来传递参数。重点展示了使用`childEvent`方法在子组件中响应父组件的事件。

子组件

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

父组件

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