• Props：用于父组件向子组件传递数据。

Props 声明

  1. https://cn.vuejs.org/guide/components/props.html#props-declaration
  2. 父组件 App.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<template>
  <div>
     <MyComponent :foo />
     <button @click="foo += 1">Add 1</button>
  </div>
</template>

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

const foo = ref(12)

</script>
  1. 子组件 MyComponent.vue。
1
2
3
4
5
6
7
8

<template>
    Prpos {{ props.foo }}
</template>


<script setup>
const props = defineProps(['foo'])
</script>
  1. 除了使用字符串数组来声明 props 外，还可以使用对象的形式：
1
2
3
4
5

// 使用 <script setup>
defineProps({
  title: String,
  likes: Number
})

响应式 Props 解构

  1. https://cn.vuejs.org/guide/components/props.html#reactive-props-destructure
  2. 父组件 App.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<template>
  <div>
     <MyComponent :foo />
     <button @click="foo += 1">Add 1</button>
  </div>
</template>

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

const foo = ref(12)

</script>
  1. 子组件 MyComponent.vue。
1
2
3
4
5
6
7
8

<template>
    Prpos {{ foo }}
</template>


<script setup>
const { foo } = defineProps(['foo'])
</script>

将解构的 props 传递到函数中

  1. https://cn.vuejs.org/guide/components/props.html#%E5%B0%86%E8%A7%A3%E6%9E%84%E7%9A%84-props-%E4%BC%A0%E9%80%92%E5%88%B0%E5%87%BD%E6%95%B0%E4%B8%AD

传递 prop 的细节

  1. https://cn.vuejs.org/guide/components/props.html#prop-passing-details

Prop 名字格式

  1. https://cn.vuejs.org/guide/components/props.html#prop-name-casing
  2. 父组件 App.vue。
1
2
3
4
5
6
7
8
9

<template>
  <div>
     <MyComponent greeting-message="hello" />
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
</script>
  1. 子组件 MyComponent.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<template>
    <span>Prpos {{ greetingMessage }}</span>
</template>


<script setup>
const { greetingMessage } = defineProps({
      greetingMessage: String
})
</script>

静态 vs. 动态 Props

  1. https://cn.vuejs.org/guide/components/props.html#static-vs-dynamic-props

传递不同的值类型

  1. https://cn.vuejs.org/guide/components/props.html#passing-different-value-types

使用一个对象绑定多个 prop

  1. https://cn.vuejs.org/guide/components/props.html#binding-multiple-properties-using-an-object

单向数据流

  1. https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
  2. prop 被用于传入初始值；而子组件想在之后将其作为一个局部数据属性。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<!-- 子组件 MyComponent.vue -->
<template>
    <span>Prpos {{ counter }}</span>
    <button @click="counter += 1">counter add 1</button>
</template>


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

const props = defineProps(['initialCounter'])

// 计数器只是将 props.initialCounter 作为初始值
// 像下面这样做就使 prop 和后续更新无关了
const counter = ref(props.initialCounter)
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<!-- 父组件 App.vue -->
<template>
  <div>
     <MyComponent :initial-counter="count" />
     initial-counter is : {{ count }}
  </div>
</template>

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

const count = ref(0)

</script>
  1. 需要对传入的 prop 值做进一步的转换。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- 子组件 MyComponent.vue -->
<template>
    <div id="my-id">
        <span>size: {{ size }}</span>
        <span>normalizedSize: {{ normalizedSize }}</span>
    </div>
</template>


<script setup>
import { computed } from 'vue'

const props = defineProps(['size'])

// 该 prop 变更时计算属性也会自动更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())
</script>

<style scoped>
#my-id > span {
    display: block;
}
</style>

1
2
3
4
5
6
7
8
9

<template>
  <div>
     <MyComponent size="abcdEdf" />
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
</script>

更改对象 / 数组类型的 props

  1. https://cn.vuejs.org/guide/components/props.html#mutating-object-array-props
  2. 注意：当对象或数组作为 props 被传入时，虽然子组件无法更改 props 绑定，但仍然可以更改对象或数组内部的值。这是因为 JavaScript 的对象和数组是按引用传递，对 Vue 来说，阻止这种更改需要付出的代价异常昂贵。

Prop 校验

  1. https://cn.vuejs.org/guide/components/props.html#prop-validation