Vue3 中使用 setup 监听 props**

在 Vue.js 中使用 setup 函数监听 Props：终极指南

摘要

在 Vue.js 3 中，setup 函数为我们提供了一种现代且简洁的方法来管理组件逻辑和状态。本文将深入探讨如何使用 setup 函数监听 Props，这对于创建响应式和动态的 Vue.js 组件至关重要。

使用 setup 函数监听 Props

在 setup 函数中，我们使用 watch 选项来监听 Props。watch 选项接受两个参数：

1. 被监视的 Props： 可以是单个 Prop 或 Props 数组。
2. 回调函数： 在 Prop 发生更改时触发。

<script setup>
  const props = defineProps(['propName'])

  watch(props, (newProps, oldProps) => {
    // propName has changed
  })
</script>

处理嵌套 Props

嵌套 Props 是包含其他对象的 Props。为了监视嵌套 Props 的更改，可以使用 watch 选项的 deep 选项。

<script setup>
  const props = defineProps(['nestedProp'])

  watch(props, (newProps, oldProps) => {
    // nestedProp has changed
  }, { deep: true })
</script>

监听多个 Props

为了同时监听多个 Props，可以使用数组作为 watch 选项的第一参数。

<script setup>
  const props = defineProps(['prop1', 'prop2'])

  watch([prop1, prop2], (newProps, oldProps) => {
    // prop1 or prop2 has changed
  })
</script>

示例：响应父组件 Tab 切换

假设有一个子组件 ChildComponent，它从父组件接收 activeTab Prop，指示当前激活的 Tab。子组件的任务是根据 activeTab Prop 显示不同的信息。

父组件：

<template>
  <div>
    <button @click="changeTab(0)">Tab 1</button>
    <button @click="changeTab(1)">Tab 2</button>
    <ChildComponent :active-tab="activeTab" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0
    }
  },
  methods: {
    changeTab(index) {
      this.activeTab = index
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ activeTab }}</p>
  </div>
</template>

<script setup>
  const props = defineProps(['activeTab'])

  watch(props, (newProps, oldProps) => {
    // activeTab has changed
    // Update the displayed information accordingly
  })
</script>

结论

使用 setup 函数监听 Props 提供了一种简洁而有效的方法来响应组件属性的变化。通过利用 watch 选项，我们可以轻松地监视单一或多个 Props，并在发生更改时执行自定义逻辑。这对于创建响应式和动态组件至关重要，这些组件可以根据其父组件或用户的交互做出调整。

常见问题解答

1. setup 函数和 watch 选项有什么区别？

   • setup 函数用于管理组件的逻辑和状态，而 watch 选项用于监听 Prop 的更改。

2. 嵌套 Props 是什么？

   • 嵌套 Props 是包含其他对象的 Props。

3. 什么时候应该使用 watch 选项的 deep 选项？

   • 当你需要监视嵌套 Props 的更改时。

4. 如何监听多个 Props？

   • 使用数组作为 watch 选项的第一参数。

5. 为什么在 Vue.js 3 中使用 setup 函数很重要？

   • setup 函数提供了比选项 API 更简洁、更具响应性的方式来管理组件逻辑和数据绑定。