访问 Props

2023年05月02日

柏拉文

越努力，越幸运

一、结合单文件组件使用的组合式 API

---

在 <script setup> 可以使用 defineProps 接收与 props 选项相同的值。defineProps 只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。

<template>
  <div>
    {{  a }}
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  a: {
    type: String,
    required: true
  }
});
</script>

二、基于选项式 API 的组件中集成基于组合式 API

---

setup 函数的第一个参数是组件的 props。和标准的组件一致，一个 setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新。注意: 如果你解构了 props 对象，解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。

2.1 直接访问

可以直接通过 props.xxx 来访问 props 属性

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

2.2 解构访问

如果直接解构的话，解构出的变量将会丢失响应性。如果你确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数：

import { toRefs, toRef } from 'vue'

export default {
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)

    // 或者，将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}