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

在这里插入图片描述

3.10props属性

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

在这里插入图片描述

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

  1. 在父组件中定义数据
  2. 在使用组件时,绑定父组件中的数据
  3. 在子组件中通过props属性声明父组件中传递过来的参数
  4. 在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', {
        //声明props
        props:['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:{}),同时可以指定以下属性:

  1. type: 指定数据类型 String Number Object …注意不能使用字符串数组,只能是对象大写形式
  2. required: 指定是否必输
  3. default: 给默认值或者自定义函数返回默认值
  4. 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遇到过的问题及个人总结

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘大猫.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值