博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue中prop属性传值解析
阅读量:6140 次
发布时间:2019-06-21

本文共 1473 字,大约阅读时间需要 4 分钟。

刚接触前端开发的小伙伴或许不熟悉prop属性,但是有react框架经验的小伙伴肯定很熟悉它,我一直在用props属性,但到今天我才有时间整理prop属性的用法。废话不多直入主题。

1.prop的定义:

    在没有状态管理机制的时候,prop属性是组件之间主要的通信方式,prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。

2.prop定义的数据类型

props: {    name: String, //字符串类型    type: {      validator: function(value) { //验证函数        // 这个值必须匹配下列字符串中的一个        return ["success", "warning", "danger"].includes(value);      }    },    list: {      type: Array,//数组类型,也可以是Object      default: () => []    },    isVisible: { //Boolean类型      type: Boolean,      default: false    },    onChange: {  //函数类型      type: Function,       default: () => {}    }  },复制代码

prop属性中可以定义属性的类型,也可以定义属性的初始值。如name:String,default:"vm",表示第一次加载name属性时其值为vm。prop属性中定义的属性也可以验证该属性,比如上面的type属性,其值必须是"success", "warning", "danger"中的任意一个,要是不是这是三个中的任意一个也可以显示,但是这时控制台会报错,所以要使用validator验证函数时要谨慎。这里的list定义的是一个数组,默认必须从一个工厂函数获取。isVisble定义的是一个boolean值,默认是default:false。onChange定义的是一个函数,这个函数在这里的意义是建立子组件向父组件传值的途径。

3.非prop特性

     有时候父组件会向子组件传任意特性。比如现在有一个父组件Parent,一个子组件Child,这时候你要向子组件添加一个data-date-picker="activated" ,这时候你在Child组件中加inheritAttrs:false

inheritAttrs: false, //不继承父组件的特性复制代码

当你添加完这个属性后子组件将不会继承该属性。

  很多时候inheritAttrs:false结合$attrs实例方法可以决定这些特性被赋予哪些元素。

Vue.component('base-input', {  inheritAttrs: false,  props: ['label', 'value'],  template: `      `})复制代码

复制代码

这个例子中如果没有给组件base-input中的input使用v-bind绑定$attrs实例属性,在父组件中的placeholder属性就不会传递给子组件

关于Prop属性欢迎各位道友指正补充。

转载于:https://juejin.im/post/5c935243f265da60c603896d

你可能感兴趣的文章
如何解决mysql数据库8小时无连接自动关闭
查看>>
ASP.NET Aries 入门开发教程5:自定义列表页工具栏区
查看>>
Rushcrm:如何利用CRM系统的权限设置
查看>>
《Cisco IPv6网络实现技术(修订版)》一2.7 复习题
查看>>
Facebook 开源 Android 调试工具 —— Stetho
查看>>
生活不止有苟且,还有N个免费DevOps开源工具
查看>>
视频直播Android推流SDK初体验
查看>>
第十三天:制定预算
查看>>
java技术团队必须要注意的那几个点
查看>>
Hibernate ORM 5.1.7 发布,数据持久层框架
查看>>
数百万网站因流行 PHP 脚本的安全漏洞而受影响
查看>>
《走进SAP(第2版)》——2.7 SAP对业务流程的支持
查看>>
《C语言解惑》—— 2.9 输出值的操作符
查看>>
Project Volta 让 Android 续航提升了多少?
查看>>
《树莓派实战秘籍》——1.7 技巧07使用过压获得更高的性能
查看>>
《SAS 统计分析与应用从入门到精通(第二版)》一1.4 SAS系统的文件管理
查看>>
《众妙之门——网页设计专业之道》——2.4 总结
查看>>
MySQL sql_mode 说明(及处理一起 sql_mode 引发的问题)
查看>>
Java 注解详解 (annotation)
查看>>
鹰眼跟踪、限流降级,EDAS的微服务解决之道
查看>>