vue中关于prop
组件之间的项目通信在vue中十分常见,父组件的数据传到子组件需要prop的支持,我们来看下prop
1.html的特性名大小写不敏感,浏览器会把所有大写字母解释为小写字母,使用dom模板时,使用等价的kabad-case命名
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
2.prop的类型 prop可以在父组件引入的时候传入很多类型的值
常见的是字符串数组形式
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些属性的名称和值分别是 prop 各自的名称和类型:
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
这不仅为你的组件提供了文档,还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。
3.静态传值和动态传值
直接传一句话,或者使用v-bind绑定一个属性名,动态赋值,具体可以参考官网。
4.单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
这是官方的解释,我自己写demo试了一下,如果是基础类型,比如Number、String这些类型,在子组件中修改值,修改成功,但是vue发出警告,因为是单向数据流,所以父组件的值不会改变。如果是引用类型数组和对象,vue没有警告,子组件和父组件的值同时发生改变。
5.prop验证
Vue.component('my-component', {
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
在prop验证失败,在控制台中有警告。
vue中关于prop的更多相关文章
- 浅谈Vue中的Prop
Prop 基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message p ...
- (父向子传值)组件内的properties类似与vue中的prop接收外界传递进来的参数
=================================================== 外界引用组件的时候 传递方法 父传子
- vue中prop传值时加不加v-bind(冒号:)
前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 动手实现一个vue中的模态对话框组件
写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...
- vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决
在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...
- 基于iscroll的better-scroll在vue中的使用
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...
- better-scroll在vue中的坑
在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开“微信 —> 钱包—>滴滴出 ...
随机推荐
- HikariCP--一款高性能的 JDBC 连接池
源码地址:https://github.com/brettwooldridge/HikariCP 使用方法: Java 8 maven artifact: <dependency> < ...
- 【DNN 系列】 下载安装
1.下载 http://dotnetnuke.codeplex.com/releases/view/119857 2.安装 下载完毕 因为 IIS 7 采用了更安全的 web.config 管理机制, ...
- childNodes.length和form.length的不同
我们知道,DOM里面提供了element.childNodes.length属性,childNodes 属性返回节点的子节点集合,以 NodeList 对象. 那么childNodes包含哪些节点呢? ...
- 2018年湘潭大学程序设计竞赛 maze(bfs)
链接:https://www.nowcoder.com/acm/contest/105/F来源:牛客网 有q个单向传送阵,每个传送阵各有一个入口和一个出口,入口和出口都在迷宫的格子里,当走到或被传送到 ...
- Debian9.5 WPS for Linux字体配置(字体缺失解决办法)
启动WPS for Linux后,出现提示"系统缺失字体" . 出现提示的原因是因为WPS for Linux没有自带windows的字体,只要在Linux系统中加载字体即可. 具 ...
- CF620E New Year Tree(线段树+二进制)
题解 弱智题,二进制表示位数.合并时用| 就是被1<<x卡了好久. 要写成1ll<<x才行 #include<iostream> #include<cstri ...
- 包及常用模块(time、datetime、random、sys)
什么是包?‘ #官网解释 Packages are a way of structuring Python’s module namespace by using “dotted module nam ...
- Linux学习,部署django项目到服务器,及安装python,uwsgi等
开启网络 vi /etc/sysconfig/network-script/ifcfg-eth0 onboot=yes 退出保存 service network restart ping www.ba ...
- Android开发之Menu:OptionMenu(选项菜单)、ContextMenu(上下文菜单)、SubMenu(子菜单)
菜单的概念,现在已经很普及了.Windows系统.Mac.桌面版Linux.Java Swing等,都有可视化菜单.一.Android平台3种菜单 选项菜单(OptionMenu).上下文菜单(Co ...
- CodeForces 400A Inna and Choose Options
Inna and Choose Options Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on Cod ...