Vue 组件间事件传递与方法调用

在 Vue 3 中，组件间的事件和方法调用是实现交互的关键。通过理解子组件如何触发父组件的方法以及父组件如何调用子组件的方法，可以更高效地组织和管理你的 Vue 应用。本文将详细介绍这两个方面的实现方式。

1. 子组件调用父组件的方法

在 Vue 3 中，子组件可以通过 $emit 方法触发父组件定义的方法。这是一个非常常见的场景，例如，用户在子组件中提交表单时，可以通过事件通知父组件。

1.1 使用 emit 方法（Vue 3.0）

子组件：

<script>
export default {
  emits: ['submit'],
  setup(props, ctx) {
    // 触发 'submit' 事件并传递参数
    const params = { /* 你的参数 */ };
    ctx.emit('submit', params);
  }
}
</script>

父组件：

<template>
  <Children @submit="submitHandel"/>
</template>

<script>
export default {
  name: 'TodoItem',
  setup(props, { emit }) {
    const submitHandel = (params) => {
      console.log('子组件调用了父组件的submitHandel方法', params);
    };
    
    return {
      submitHandel,
    };
  }
};
</script>

1.2 使用 defineEmits() 宏（Vue 3.2）

在 Vue 3.2 中，你需要显式地声明子组件要触发的事件。

子组件：

<script setup>
const emit = defineEmits(['submit']);

function buttonClick(params) {
  emit('submit', params);
}
</script>

父组件与之前相同：

<template>
  <Children @submit="submitHandel"/>
</template>

<script setup>
const submitHandel = (params) => {
  console.log('子组件调用了父组件的submitHandel方法', params);
};
</script>

2. 父组件调用子组件的方法或属性

父组件也可以通过 ref 直接调用子组件的方法或访问其属性。这在需要控制子组件行为的场景中非常有用。

2.1 Vue 3.0 中的实现

子组件：

<script>
import { ref } from 'vue';

export default {
  setup(props, { emit }) {
    const isShow = ref(false);

    // 父组件可以调用这个方法
    const showSubComponent = () => {
      isShow.value = !isShow.value;
    };
    
    return {
      showSubComponent,
    };
  }
}
</script>

父组件：

<template>
  <div class="todo-list">
    <TodoItemVue :itemList="itemList" ref="todoItemVueRef" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup(props, { emit }) {
    const todoItemVueRef = ref(null);

    // 调用子组件的方法
    const callItemFuncHandel = () => {
      todoItemVueRef.value.showSubComponent();
    };

    return {
      todoItemVueRef,
      callItemFuncHandel
    };
  }
};
</script>

2.2 Vue 3.2 中的实现

在 Vue 3.2 中，子组件需要使用 defineExpose() 显式暴露其方法。

子组件：

<script setup>
import { ref } from 'vue';

const isShow = ref(false);

const showSubComponent = () => {
  isShow.value = !isShow.value;
};

// 通过 defineExpose 将方法暴露出去
defineExpose({
  showSubComponent
});
</script>

父组件保持不变：

<template>
  <div class="todo-list">
    <TodoItemVue :itemList="itemList" ref="todoItemVueRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const todoItemVueRef = ref(null);

const callItemFuncHandel = () => {
  todoItemVueRef.value.showSubComponent();
};
</script>

结论

通过理解 Vue 3 中子组件与父组件之间的事件和方法调用，你可以构建更加灵活和响应迅速的应用。使用 emit 和 defineEmits() 方法来处理事件，以及使用 ref 和 defineExpose() 来实现父子组件的交互，使得你的代码更具可读性和可维护性。希望这篇文章能帮助你更好地理解和使用 Vue 3 的组件间通信机制！