Vue 子组件调用父组件函数|极客教程

Vue 子组件调用父组件函数

在Vue中，子组件通常需要与父组件进行交互，其中一个常见的需求是在子组件中调用父组件的函数。本文将详细介绍如何在Vue中实现子组件调用父组件函数的方法。

在Vue中，父组件和子组件之间通过事件进行通信。子组件通过$emit方法触发一个事件，父组件使用v-on监听该事件并执行相应的函数。通过这种方式，子组件可以调用父组件的函数。

1. 创建父组件

首先，我们创建一个父组件，命名为ParentComponent.vue。在该组件中定义一个函数parentFunction，并在模板中调用该函数。

<template>
  <div>
    <button @click="parentFunction">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    parentFunction() {
      console.log('父组件函数被调用了');
    }
  }
}
</script>

2. 创建子组件

接下来，我们创建一个子组件ChildComponent.vue。在子组件中添加一个按钮，当点击按钮时触发一个事件，将在父组件中执行parentFunction函数。

<template>
  <div>
    <button @click="invokeParentFunction">调用父组件函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    invokeParentFunction() {
      this.$emit('call-parent-function');
    }
  }
}
</script>

3. 在父组件中使用子组件

现在，我们在父组件中引入子组件，并监听子组件触发的事件。当子组件触发call-parent-function事件时，调用父组件的parentFunction函数。

<template>
  <div>
    <child-component @call-parent-function="parentFunction"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentFunction() {
      console.log('父组件函数被调用了');
    }
  }
}
</script>

4. 整体示例

下面是整个示例的完整代码：

父组件 ParentComponent.vue：

<template>
  <div>
    <button @click="parentFunction">点击我</button>
    <child-component @call-parent-function="parentFunction"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentFunction() {
      console.log('父组件函数被调用了');
    }
  }
}
</script>

子组件 ChildComponent.vue：

<template>
  <div>
    <button @click="invokeParentFunction">调用父组件函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    invokeParentFunction() {
      this.$emit('call-parent-function');
    }
  }
}
</script>