props \ defineProps
- 命名：如果一个 prop 网站建设定制开发的名字很长，网站建设定制开发建议使用小驼峰
props: { greetingMessage: String } - 使用：
-
网站建设定制开发使用时为了和 HTML attribute 对齐，网站建设定制开发通常将其写为 短横线 形式
<MyComponent greeting-message="hello" /> -
网站建设定制开发有时虽为常量但也要使用 ，网站建设定制开发因为这是一个 JavaScript 表达式而不是一个字符串
<BlogPost :likes="42" /> /* 42 为数字，不为字符串 */<BlogPost :likes="false" /> /* false 为布尔值，不为字符串 */<BlogPost is-published /> /* 仅写上 prop 但不传值，会隐式转换为 `true` */如果没有在 props 中把 is-published 的类型设置为 Boolean，则这里的值为空字符串，而不是“true”。- 1
- 2
- 3
- 4
- 只使用
v-bind而非:prop-name
// data() 中定义post: { id: 1, title: 'My Journey with Vue'}<BlogPost v-bind="post" />// 等价于<BlogPost :id="post.id" :title="post.title" />- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 单项数据流：父级 prop 的更新会向下流动到子组件中, 不应该在一个子组件内部改变 prop
1 props
一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是 attribute
<template>中引用: propA<script>中引用: this.propsA
// 1. 字符串数组props: ['foo']// 2. 对象prop: { title: String, // title 为名称，String 为构造函数 likes: Number}// 3. 可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。prop: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true, }, // 带有默认值的数字 propD: { type: Number, default: 100, }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: "hello" }; }, }, propE: { type: Object, default: () => {} }, propE: { type: Array, default() { return []; } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ["success", "warning", "danger"].indexOf(value) !== -1; }, },}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- type 可以是原生构造器：String、Number、Boolean、Array、Object、Date、Function、Symbol
- type 也可以是一个自定义构造器，使用 instanceof 检测。
2 defineProps
只能在 <script setup> 中使用，无需导入
defineProps API 接收与 props 选项相同的值
<template>中引用: propA<script>中引用: props.propsA
// 仅<template> 中使用 propA、propBdefineProps({ propA: { type: [Number, String], default: '' }, propB: { type: Number, default: 2 }});// <script> 中也使用 propA、propB, 声明为变量const props = defineProps({ propA: { type: [Number, String], default: '' }, propB: { type: Number, default: 2 }});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 因为 defineProps 只是一个语法糖，并不是一个真实存在的函数，它的作用在于告诉 vue 运行时工具，这里我们要引入一个变量。所以不能用普通变量的方式去看待它。
- 用于组件通信中父级组件给子级组件传值，其用来声明 props，其接收值为props选项相同的值
- 默认支持常见的类型检查，在 ts 下，我们需要明确变量的类型，类型经常是我们的自定义类型
- 只能在
<script setup>中使用 - 不需要被导入即可使用,它会在编译
<script setup>语法块时一同编译掉 - 必须在
<script setup>的顶层使用，不可以在<script setup>的局部变量中引用 - 不可以访问
<script setup>中定义的其他变量，因为在编译时整个表达式都会被移到外部的函数中 - defineProps 是 props 从选项式 API 到组合式 API 的变体
- 最初的 Composition API 是在 Options API 基础上改进的，不仅需要使用 setup() 函数，还要在 setup() 末尾返回所有模版需要用到的变量和函数，使用起来相当繁琐。于是后面就增加了
<script setup>语法糖： - 从生命周期来讲，相当于 created
- 支持顶层 await（因为实际上这还是个 setup() 函数）
- 所有 import 的内容、声明的变量和函数默认都返回
- 至少省了两层缩进
- 但是由于少了 export，没法传参，也不方便暴露接口，所以作者就增加了三个工具方法：defineProps、defineEmits、defineExpose
- 注意，这三个工具方法只是帮助 Vue 编译器构建组件，它们不会出现在最终代码里，我们也不能预期它们会像普通函数那样工作。