vue子组件函数怎么调用

如何调用 Vue 子组件函数？插槽属性：子组件定义插槽属性，父组件传入方法，子组件监听插槽事件并调用父组件方法。refs：父组件使用 ref 引用子组件，然后通过引用访问子组件方法。**$emit：**子组件通过 $emit 发射自定义事件，父组件监听事件并执行操作。provide/inject：父组件通过 provide 提供数据或方法，子组件通过 inject 注入数据或方法。

如何调用 Vue 子组件函数

Vue 中的子组件可以调用其父组件的方法，也可以调用自己的方法。以下是如何实现的：

调用父组件方法

腾讯交互翻译

腾讯AI Lab发布的一款AI辅助翻译产品

下载

1. 使用插槽属性：在子组件中定义一个插槽属性，并传入父组件的方法。父组件可以向插槽传递值和事件，子组件可以监听插槽事件并调用父组件的方法。

<code class="html"><!-- 父组件 -->
<MyComponent>
  <template v-slot:my-slot="props">
    <button @click="props.myFunction()">调用父组件方法</button>
  </template>
</MyComponent>

<!-- 子组件 -->
<template>
  <slot name="my-slot" :myFunction="myFunction"></slot>
</template>

<script>
export default {
  methods: {
    myFunction() {
      console.log('子组件调用了父组件方法');
    }
  }
};
</script></code>

2. 使用 refs：在父组件中使用 ref 引用子组件，然后通过该引用访问子组件的方法。

<code class="html"><!-- 父组件 -->
<template>
  <MyComponent ref="myComponent"></MyComponent>
</template>

<script>
export default {
  mounted() {
    this.$refs.myComponent.myFunction(); // 调用子组件方法
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="myFunction()">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    myFunction() {
      console.log('子组件方法被调用');
    }
  }
};
</script></code>

调用子组件方法

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

1. **使用 $emit：**在子组件中使用 $emit 发射一个自定义事件，并传递数据作为参数。父组件可以监听该事件并执行相应的操作。

<code class="html"><!-- 子组件 -->
<template>
  <button @click="emitMyEvent()">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    emitMyEvent() {
      this.$emit('my-event', { data: '从子组件传递的数据' });
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <MyComponent @my-event="handleMyEvent"></MyComponent>
</template>

<script>
export default {
  methods: {
    handleMyEvent(event) {
      console.log(event.data); // 接收从子组件传递的数据
    }
  }
};
</script></code>

2. 使用 provide/inject：父组件使用 provide 提供数据或方法，子组件使用 inject 注入数据或方法。

<code class="html"><!-- 父组件 -->
<template>
  <provide :myMethod="myMethod">
    <MyComponent></MyComponent>
  </provide>
</template>

<script>
export default {
  provide() {
    return {
      myMethod: this.myMethod
    };
  },
  methods: {
    myMethod() {
      console.log('父组件方法被调用');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="callMyMethod()">调用父组件方法</button>
</template>

<script>
export default {
  inject: ['myMethod'],
  methods: {
    callMyMethod() {
      this.myMethod();
    }
  }
};
</script></code>