组件之间的项目通信在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的更多相关文章

  1. 浅谈Vue中的Prop

    Prop 基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message p ...

  2. (父向子传值)组件内的properties类似与vue中的prop接收外界传递进来的参数

    =================================================== 外界引用组件的时候 传递方法  父传子

  3. vue中prop传值时加不加v-bind(冒号:)

    前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...

  4. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  5. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  6. 动手实现一个vue中的模态对话框组件

    写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...

  7. 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 ...

  8. 基于iscroll的better-scroll在vue中的使用

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...

  9. better-scroll在vue中的坑

    在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开“微信 —> 钱包—>滴滴出 ...

随机推荐

  1. HikariCP--一款高性能的 JDBC 连接池

    源码地址:https://github.com/brettwooldridge/HikariCP 使用方法: Java 8 maven artifact: <dependency> < ...

  2. 【DNN 系列】 下载安装

    1.下载 http://dotnetnuke.codeplex.com/releases/view/119857 2.安装 下载完毕 因为 IIS 7 采用了更安全的 web.config 管理机制, ...

  3. childNodes.length和form.length的不同

    我们知道,DOM里面提供了element.childNodes.length属性,childNodes 属性返回节点的子节点集合,以 NodeList 对象. 那么childNodes包含哪些节点呢? ...

  4. 2018年湘潭大学程序设计竞赛 maze(bfs)

    链接:https://www.nowcoder.com/acm/contest/105/F来源:牛客网 有q个单向传送阵,每个传送阵各有一个入口和一个出口,入口和出口都在迷宫的格子里,当走到或被传送到 ...

  5. Debian9.5 WPS for Linux字体配置(字体缺失解决办法)

    启动WPS for Linux后,出现提示"系统缺失字体" . 出现提示的原因是因为WPS for Linux没有自带windows的字体,只要在Linux系统中加载字体即可. 具 ...

  6. CF620E New Year Tree(线段树+二进制)

    题解 弱智题,二进制表示位数.合并时用| 就是被1<<x卡了好久. 要写成1ll<<x才行 #include<iostream> #include<cstri ...

  7. 包及常用模块(time、datetime、random、sys)

    什么是包?‘ #官网解释 Packages are a way of structuring Python’s module namespace by using “dotted module nam ...

  8. Linux学习,部署django项目到服务器,及安装python,uwsgi等

    开启网络 vi /etc/sysconfig/network-script/ifcfg-eth0 onboot=yes 退出保存 service network restart ping www.ba ...

  9. Android开发之Menu:OptionMenu(选项菜单)、ContextMenu(上下文菜单)、SubMenu(子菜单)

    菜单的概念,现在已经很普及了.Windows系统.Mac.桌面版Linux.Java Swing等,都有可视化菜单.一.Android平台3种菜单  选项菜单(OptionMenu).上下文菜单(Co ...

  10. CodeForces 400A Inna and Choose Options

    Inna and Choose Options Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on Cod ...