props 是组件的自定义属性，组件的使用者可以通过 props 把数据传递到子组件内部，供子组件内部进行使用。
在封装 vue 组件时，可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。
文章图片
然后需要在父组件中调用：
文章图片
具体代码如下：
HiVue.vue:
Hi Vue！！！,{{name}} loves {{hoppy}}
>
export default {
name: "HiVue",
props:['name','hoppy']
}
scoped>
app.vue
>import HiVue from "@/components/HiVue";
export default {
name: 'App',
components: {HiVue},
}
scoped>:deep(.styh1){
color: blue;
}
【vue3|vue3学习7（props以及验证）】效果如下：
文章图片
如果父组件给子组件传递了未声明的 props 属性，则这些属性会被忽略，无法被子组件使用。
可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值。
举个栗子
修改app.vue：
>import HiVue from "@/components/HiVue";
export default {
name: 'App',
components: {HiVue},
data(){
return{
names:'Danny',
ho:"cats",
}
},
methods:{
}
}
scoped>:deep(.styh1){
color: blue;
}
效果如下：
文章图片
props 验证指的是：在封装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。
接收的数据 : 数据类型(Number，String，Boolean，Object，Array，Function，RegExp )
举个栗子：
HiVue.vue
Hi Vue！！！{{name}} is {{age}} years old
>
export default {
name: "HiVue",
props: {
name:String,
age:Number,
}
}
scoped>
app.vue
>import HiVue from "@/components/HiVue";
export default {
name: 'App',
components: {HiVue},
data(){
return{
names:'Danny',
age:13,
}
},
methods:{
}
}
scoped>:deep(.styh1){
color: blue;
}
效果如下：
文章图片
如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型，例如：`age:[Boolean,Number],
如果组件的某个 prop 属性是必填项，必须让组件的使用者为其传递属性的值。此时，可以通过如下的方式将
其设置为必填项：
age:{type:[Boolean,Number],required:true},推荐阅读
- css|【前端】Emmet语法、CSS复合选择器、元素显示样式
- 笔记|CSS设置背景颜色透明
- html5|（前端知识点）CSS3 新特性与html5 新特性
- 微信小程序|微信小程序全局配置及页面配置
- 微信小程序（黑马）|【微信小程序】WXML语法——数据绑定
- 微信小程序（黑马）|【微信小程序】运行机制和更新机制
- 项目实战|管理系统-ITclub（下）
- #|JavaScript高级（ES6）
- vue|Vue安装及环境配置、开发工具