vue中父子组件如何相互调用方法-Vue.js-PHP中文网

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

下次还敢

发布： 2024-05-12 18:00:57

原创

1300人浏览过

在 Vue 中，父子组件可以通过以下方式相互调用方法：父组件调用子组件方法：通过 props、refs。子组件调用父组件方法：通过 emit、provide/inject。

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

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

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

父组件调用子组件方法

通义万相

通义万相，一个不断进化的AI艺术创作大模型

596

查看详情

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

子组件调用父组件方法

立即学习“前端免费学习笔记（深入）”；

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

具体步骤

父组件调用子组件方法

使用 props：

<code class="javascript"><!-- 父组件 -->
<template>
  <ChildComponent :my-method="myMethod" />
</template>

<script>
  export default {
    methods: {
      myMethod() {
        console.log("父组件的方法被调用了");
      },
    },
  };
</script>

<!-- 子组件 -->
<template>
  <button @click="myMethod">触发父组件的方法</button>
</template>

<script>
  export default {
    props: ['myMethod'],
  };
</script></code>

登录后复制

使用 refs：

<code class="javascript"><!-- 父组件 -->
<template>
  <ChildComponent ref="child" />
</template>

<script>
  export default {
    mounted() {
      this.$refs.child.myMethod(); // 调用子组件的方法
    },
  };
</script>

<!-- 子组件 -->
<template>
  <button>触发父组件的方法</button>
</template>

<script>
  export default {
    methods: {
      myMethod() {
        console.log("父组件的方法被调用了");
      },
    },
  };
</script></code>

登录后复制

子组件调用父组件方法

立即学习“前端免费学习笔记（深入）”；

使用 emit：

<code class="javascript"><!-- 子组件 -->
<template>
  <button @click="triggerEvent">触发父组件的事件</button>
</template>

<script>
  export default {
    methods: {
      triggerEvent() {
        this.$emit('my-event'); // 触发父组件的事件
      },
    },
  };
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @my-event="myMethod" />
</template>

<script>
  export default {
    methods: {
      myMethod() {
        console.log("子组件触发了父组件的事件");
      },
    },
  };
</script></code>

登录后复制

使用 provide/inject：

<code class="javascript"><!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
  export default {
    provide() {
      return {
        myMethod: () => {
          console.log("父组件的方法被调用了");
        },
      };
    },
  };
</script>

<!-- 子组件 -->
<template>
  <button @click="myMethod">触发父组件的方法</button>
</template>

<script>
  export default {
    inject: ['myMethod'],
  };
</script></code>

登录后复制

以上就是vue中父子组件如何相互调用方法的详细内容，更多请关注php中文网其它相关文章！