Composition API的魅力：解锁Vue 3开发的无限可能（第3部分）

2023-11-21 16:19:17

各位充满好奇的开发者们，欢迎来到我们关于Vue 3 Composition API探秘之旅的第三部分！在这一章节中，我们将深入探讨setup函数中令人着迷的参数——props和context。准备好迎接一些扣人心弦的代码和令人惊叹的功能了吗？

揭开props的神秘面纱

setup函数中第一个参数props，就像一座承载数据的宝库，它包含了从父组件传递下来的所有信息。通过props，子组件可以访问这些数据，就像它们是自己的属性一样。它的神奇之处在于，它允许组件以一种更灵活、更直观的方式进行交互。

探索context的魔力

context参数就像一个幕后英雄，它为setup函数提供了一系列有价值的工具。其中最引人注目的是ref函数，它使你能够轻松获取组件实例的引用。此外，context还包含其他有用的信息，例如attrs、slots和emit。

有了props和context的强大组合，你就能释放Vue 3 Composition API的全部潜力。它为你提供了前所未有的灵活性、可重用性和可测试性。

实际操作：代码示例

为了让你亲眼见证Composition API的魅力，我们提供了一个代码示例，展示了如何使用props和context：

<script setup>
  // 从父组件接收数据
  const props = defineProps(['message']);

  // 创建一个响应式状态
  const count = ref(0);

  // 监听props变化
  watch(props, () => {
    // 当props改变时更新count
    count.value = props.message.length;
  });

  // 暴露一个计算属性
  const doubleCount = computed(() => count.value * 2);

  // 获取组件实例引用
  const componentRef = ref(null);
</script>

<template>
  <div ref="componentRef">
    <p>{{ message }}</p>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>