文章目录

3.10props属性
- 举例：父组件给子组件传递属性msg和greetText，子组件用属性a和b接收，并打印输出
3.11props校验
- 举例
3.12非props属性
- 举例：定义子组件设置class和style，而标签引用子组件时也设置了class和style，那么会进行属性合并，如果重名采用就近原则。
本人其他相关文章链接

3.10props属性

组件可以嵌套使用，叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的：

使用父组件给子组件传递属性流程：

在父组件中定义数据
在使用组件时，绑定父组件中的数据
在子组件中通过props属性声明父组件中传递过来的参数
在template属性中使用父组件中的参数

举例：父组件给子组件传递属性msg和greetText，子组件用属性a和b接收，并打印输出

<div id="app"><!-- v-bind:a 简写成 :a --><child :a="msg" :b="greetText"></child>
</div>
<script>/**** 父子组件通信: 父组件通过props属性向子组件进行数据传递* 使用方式: 子组件定义时用props指定接收参数名* */Vue.component('child', {//声明propsprops:['a','b'],//使用父组件传递的数据template:'<span>{{a}} == {{b}}</span>'});var app = new Vue({el:'#app',data:{msg:'来自父组件的消息',greetText:'你好Child'}});
</script>

结果展示

3.11props校验

子组件在接收父组件传入数据时, 可以进行prop校验，来确保数据的格式和是否必传。

注意点1：props可配置3种形式，如果没有参数格式化校验，推荐形式1使用居多。

形式1：简单声明接收

props:['name','age','sex']

形式2：接收的同时对数据进行类型限制

props:{name:String,age:Number,sex:String
}

形式3：接收的同时对数据：进行类型限制+默认值的指定+必要性的限制

props:{name:{type:String, //name的类型是字符串required:true, //name是必要的},age:{type:Number,default:99 //默认值},sex:{type:String,required:true}
}

注意点2:

问题：如果data中属性名和props中属性重名，谁优先级高？

答案：props种属性名优先级高，因此为了避免不必要问题，避免data中属性名和props中属性重名

注意点3：props后面是对象而不是数组形式（即：只接收属性不校验可使用数组形式，如props:[]，如果要进行校验请使用对象形式，如props:{}），同时可以指定以下属性：

type: 指定数据类型 String Number Object …注意不能使用字符串数组，只能是对象大写形式
required: 指定是否必输
default: 给默认值或者自定义函数返回默认值
validator: 自定义函数校验

形式如下：

Vue.component('example', {props: {// 基础类型检测 (`null` 指允许任何类型)propA: Number,// 可能是多种类型propB: [String, Number],// 必传且是字符串propC: {type: String,required: true},// 数值且有默认值propD: {type: Number,default: 100},// 数组/对象的默认值应当由一个工厂函数返回propE: {type: Object,default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {return value > 10}}}
})

举例

完整代码：

<div id="app"><child :a="msg" :c="greetText" :f="hello"></child>
</div>
<script>Vue.component('child', {//声明props 检验props:{'a': String,'b': [Number,String],'c': {required:true},'d':{default:100},e:{type: Number,default: function () {return 1;}},f:{type:Number,validator: function (value) {return value < 100;}}},template:'<span>{{a}} == {{d}} == {{e}} == {{f}}</span>'});var app = new Vue({el:'#app',data:{msg:'来自父组件的消息',greetText:'你好Child',hello:12}});
</script>

结果展示

注意点4：props是用来接收传递过来的属性值，最后会统一绑定到vc上，最好不要直接修改props的属性值(也就是不要直接修改vc上面的props接收的属性值，会报错)，会报错如图，所以为了避免这个问题，最好的解决方案是在data中重新定一个新属性值，用来接收props中传递过来的参数属性

注意点5：组件标签传递的属性名也是有限制的，不能啥都瞎传，比如你想传递key就会报错如图，报错说key已经被征用了，不让使用

<Student name="李四" sex="女" :age="18" key=”123’/>
props:['name','age','sex',key]

3.12非props属性

标签引用子组件时，非定义的props属性,自动合并到子组件上,class和style也会自动合并,如果class或者style重复采用就近原则。

举例：定义子组件设置class和style，而标签引用子组件时也设置了class和style，那么会进行属性合并，如果重名采用就近原则。

<div id="app"><child data-index="0" class="cont" style="font-size: 20px;"></child>
</div>
<script>/**** 引用子组件: 非定义的prop属性,自动合并到子组件上,class和style也会自动合并* */Vue.component('child', {template:'<span class="item" style="color:red;">我是child</span>'});var app = new Vue({el:'#app'});
</script>

结果展示

本人其他相关文章链接

1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》：使用vue脚手架创建项目

5.vue2知识点：数据代理

6.vue2知识点：事件处理

7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

8.vue2知识点：计算属性与监听属性

9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）

10.vue2知识点：非单文件组件和单文件组件

11.vue2知识点：组件is属性

12.vue2知识点：组件模板定义

13.vue2知识点：组件的props属性、非props属性、props属性校验

14.vue2知识点：组件自定义事件

15.vue2知识点：组件插槽分发

16.vue2知识点：动态组件

17.vue2知识点：混入

18.vue2知识点：浏览器本地缓存

19.vue2知识点：全局事件总线（GlobalEventBus）

20.vue2知识点：消息订阅与发布

21.vue2知识点：nextTick语法

22.vue2知识点：Vue封装的过度与动画

23.vue2知识点：路由

24.vue2知识点：vm调用待$命令介绍

25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）

26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习：待办事项Todo-list案例练习

28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结

vue2知识点：组件的props属性、非props属性、props属性校验相关推荐

vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
Vue2组件间通信——父传子值props
Vue2组件间通信--父传子值props Vue2中组件间通信系列,本篇是关于父组件向子组件传值的介绍,这里我会用通俗的语言帮助大家理解props配置项功能: 子组件可以接收到父组件传递的数据信息, ...
【Vue.js 牛刀小试】：第九章 - 组件基础再探（data、props）
系列目录地址一.基础知识概览第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的 ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue2知识点：数据代理
文章目录一.何为数据代理二.vue中的数据代理三.回顾Object.defineProperty() 本人其他相关文章链接一.何为数据代理数据代理:通过一个对象代理对另一个对象中属性的操作( ...
Vue2知识点 - RT
vue中获取token 实现token登陆参考: https://blog.csdn.net/weixin_48255917/article/details/110622736 深入响应式原理当 ...
vue2知识点：浏览器本地缓存
文章目录 3.21浏览器本地缓存 3.21.1localStorage 举例:写一个简单的针对本地存储增删改查的案例 3.21.2sessionStorage方法同localStorage一样本人其 ...
【Vue】Vue2知识点总结
Vue知识点总结 Vue的基础概念 Vue是什么什么是渐进式和框架什么是MVVM框架脚手架的使用全局安装脚手架/包查看版本创建项目进入项目根目录运行项目 style中开启less功能 ...
vue打印props的值_vue中props传值方法
vue中props传值方法 1.开发环境 vue 2.电脑系统 windows10专业版 3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助! ...

vue2知识点：组件的props属性、非props属性、props属性校验

文章目录

3.10props属性

举例：父组件给子组件传递属性msg和greetText，子组件用属性a和b接收，并打印输出

3.11props校验

举例

3.12非props属性

举例：定义子组件设置class和style，而标签引用子组件时也设置了class和style，那么会进行属性合并，如果重名采用就近原则。

本人其他相关文章链接

vue2知识点：组件的props属性、非props属性、props属性校验相关推荐

最新文章

热门文章