Vue中点击父元素调用子组件函数？子组件能否访问父组件函数？

嘿，我来帮你搞定这两个Vue组件交互的问题，这在日常开发里确实是高频需求～

问题1：父元素点击事件调用子组件中的函数 #

要实现这个需求，最直接的方式是利用Vue的ref引用，通过ref获取子组件实例后调用其方法。下面分Vue 2和Vue 3两种场景给出示例：

Vue 2 实现方式 #

1. 子组件（比如Header.vue）中定义要被调用的函数：

<template>
  <div>我是Header组件</div>
</template>

<script>
export default {
  methods: {
    // 子组件的目标函数
    handleChildFunction() {
      console.log("父组件调用了子组件的函数！");
    }
  }
}
</script>

2. 父组件（App.vue）中通过ref绑定子组件，并在点击事件中调用：

<template>
  <div>
    <button @click="callChildFunc">点击调用子组件函数</button>
    <!-- 给子组件添加ref属性 -->
    <Header ref="headerComponent" />
  </div>
</template>

<script>
import Header from './components/Header.vue';

export default {
  components: { Header },
  methods: {
    callChildFunc() {
      // 通过$refs获取子组件实例，调用其方法
      this.$refs.headerComponent.handleChildFunction();
    }
  }
}
</script>

Vue 3 Composition API 实现方式 #

如果用Vue 3的Composition API，写法略有不同：

<!-- App.vue -->
<template>
  <button @click="callChildFunc">点击调用子组件函数</button>
  <Header ref="headerComponent" />
</template>

<script setup>
import Header from './components/Header.vue';
import { ref } from 'vue';

// 创建ref变量绑定子组件
const headerComponent = ref(null);

const callChildFunc = () => {
  // 通过.value访问子组件实例
  headerComponent.value.handleChildFunction();
}
</script>

问题2：子组件访问父组件的swapComponent函数 #

子组件不会自动识别父组件的函数，Vue的组件通信遵循单向数据流，需要显式传递才能让子组件调用父组件的方法，常用的两种方式如下：

方式1：通过Props传递函数 #

把父组件的swapComponent作为props传给子组件，子组件接收后直接调用：

1. 父组件（App.vue）传递函数：

<template>
  <Header :swapComponent="swapComponent" />
</template>

<script>
import Header from './components/Header.vue';

export default {
  components: { Header },
  methods: {
    swapComponent() {
      console.log("执行组件切换逻辑");
      // 你的组件切换代码...
    }
  }
}
</script>

2. 子组件（Header.vue）接收并调用：

<template>
  <button @click="swapComponent">点击切换组件</button>
</template>

<script>
export default {
  // 声明接收父组件传递的函数
  props: {
    swapComponent: {
      type: Function,
      required: true // 确保父组件必须传递
    }
  }
}
</script>

方式2：通过自定义事件（$emit）触发 #

子组件通过$emit触发自定义事件，父组件监听该事件并执行swapComponent函数，这种方式更符合Vue的事件驱动思想：

1. 父组件（App.vue）监听自定义事件：

<template>
  <!-- 监听子组件触发的swap事件，执行swapComponent -->
  <Header @swap="swapComponent" />
</template>

<script>
import Header from './components/Header.vue';

export default {
  components: { Header },
  methods: {
    swapComponent() {
      console.log("执行组件切换逻辑");
      // 你的组件切换代码...
    }
  }
}
</script>

2. 子组件（Header.vue）触发事件：

<template>
  <button @click="handleSwap">点击切换组件</button>
</template>

<script>
export default {
  methods: {
    handleSwap() {
      // 触发自定义事件，父组件会监听并执行对应函数
      this.$emit('swap');
    }
  }
}
</script>

Vue 3 Composition API 适配 #

如果用Vue 3的<script setup>，可以用defineProps和defineEmits来实现：

• Props方式：子组件中const props = defineProps(['swapComponent'])，然后props.swapComponent()
• 自定义事件：子组件中const emit = defineEmits(['swap'])，然后emit('swap')

内容的提问来源于stack exchange，提问作者Reo93