「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」
使用vue3+vite开发uniApp
props
props 可以是数组或对象，用于接收来自父组件的数据。
type: 会检查一个 prop 是否是给定的类型，否则抛出警告
required: 定义该 prop 是否是必填项
validator: 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 false 的值 (也就是验证失败)，一个控制台警告将会被抛出
子组件接收父组件参数
<template>
<view>
<!-- 子组件 componentA -->
<view>{{age}}</view>
</view>
</template>
<script>
export default {
props: {
// type 检测类型 + validator其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function(value) {
return value >= 0
}
}
}
}
</script>
父组件调用子组件时传参
<template>
<view>
<!-- 父组件 -->
<componentA :age="20"></componentA>
</view>
</template>
-
传递字符串值
<blog-post title="My journey with Vue hello world"></blog-post> -
传递参数值
v-bind或简写 : 动态赋值 ` -
传入数字
<!-- 即便 `20` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。v-bind 进行类型转换 -->
<blog-post :likes="20"></blog-post>
<!-- 用一个变量进行动态赋值。 v-bind 进行类型转换 -->
<blog-post :likes="post.likes"></blog-post>
- 传入布尔值
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。 简写方式 常见 checked disabled -->
<blog-post is-published></blog-post>
<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue v-bind 进行类型转换 -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。 -->
<blog-post :is-published="false"></blog-post>
<!-- 用一个变量进行动态赋值。 -->
<blog-post :is-published="post.isPublished"></blog-post>
- 传入数组
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。 v-bind 进行类型转换 -->
<blog-post :comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post :comment-ids="post.commentIds"></blog-post>
- 传入对象
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。v-bind 进行类型转换 -->
<blog-post :author="{ name: 'Veronica ya',company: 'Veridian Dynamics'}"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post :author="post.author"></blog-post>
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定： 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
不应在子组件内部改变prop的值，可以赋值给一个新的变量。
Prop 的大小写命名
HTML 中的 attribute 名是大小写不敏感的，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
<script>
<!-- 子组件componentA -->
export default {
props: ['postTitle']
}
</script>
<!-- 父组件 -->
<componentA post-title="hello!"></componentA>
总结:
Props 用于父子组件传值， 直接赋值传递的是字符串值，使用v-bind传递变量，或者表达式，以进行类型转换传值。
