vue中父子组件如何相互调用方法

Vue 中父子组件如何相互调用方法

在 Vue 中，父子组件可以通过以下方法相互调用方法：

父组件调用子组件方法

通过 props: 父组件向子组件传递一个 prop，该 prop 是一个函数，子组件可以调用它来触发父组件的方法。
通过 refs: 父组件通过 ref 获取子组件的实例，然后可以直接调用子组件的方法。

子组件调用父组件方法

通过 emit: 子组件使用 $emit 方法触发一个自定义事件，父组件使用 v-on 绑定该事件并执行相应的函数。
通过 provide/inject: 父组件通过 provide 提供一个函数，子组件通过 inject 注入该函数，然后可以直接调用该函数。

具体步骤

父组件调用子组件方法

使用 props：

<!-- 父组件 -->
<template><childcomponent :my-method="myMethod"></childcomponent></template><script>
  export default {
    methods: {
      myMethod() {
        console.log("父组件的方法被调用了");
      },
    },
  };
</script><!-- 子组件 --><template><button>触发父组件的方法</button>
</template><script>
  export default {
    props: [\'myMethod\'],
  };
</script>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。