Vue-prop

传递静态或者动态prop

1 .任何类型的值都可以传给一个prop

1 .v-bind:title="post.title + ' by ' + post.author.name" 可以这样加工
2 .title="My journey with Vue" 静态
3 .v-bind:title="post.title" 动态

2 .传入一个数字

1 .不论是静态还是动态的传入一个数字,都不能简写
2 .必须使用v-bind:name="value"
3 .来告诉这是一个表达式而不是一个字符串

3 .传入一个布尔值

1 .没有值传入的时候默认是true
2 .不论是静态还是动态传入一个一个布尔值,都必须是使用全称写法
3 .

4 .传入一个数组

1 .同上
2 .这个还之前没遇到过,不然又掉坑里面了

5 .传入一个对象:同上

6 .传入一个对象的所有属性 直接传入那个对象就可以了

1 .如果想要将一个对象的所有属性都作为prop传入,可以使用不带参数的v-bind取代prop-name
2 .

单项数据流

1 .父级的prop的更新会向下流动到子组件中,但是反过来不行
2 .传递下来的prop作为一个初始值,这个子组件希望将其作为一个本地的prop数据来使用---定义一个本地的data属性并将这个prop用作其初始值
3 .prop这个值以一种原始的值传入且需要进行转换。这个情况最好使用这个prop值来定义一个计算属性
4 .在js中,对象和数组是通过引用传入的,所以对一个数组或对象类型的prop来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态
5 .

prop验证

1.多种类型 propA:[String,Number]
2.必填字符串 prop:{type:String,required:true}
3.带有默认值 prop:{type:String,default:'123'}
4.带有默认对象 prop:{type:Object,default:function(){return {message:"123"}}}
5.自定义验证函数 prop:{validator:function(value){
                return ['notice','normal','success','warn','message'].includes(value)
            }}
//注意这个验证函数只是会提示一个报错,该怎么显示还是怎么显示,还是会传值进入,正常渲染

1 .验证失败的时候,开发环境构建版面会产生一个控制台报错
2 .prop会在一个组件实例创建之前进行验证,所以实例的属性data,computed在default或validator函数中是不可用的
3 .

非prop的属性传进来的话处理情况

1 .替换/合并特性的情况

1 .class,style传入的prop值会和原来组件内的值进行合并
2 .其他绝对大多数特性,从外部提供给的组件值会替换掉组件内部设置好的值

禁用特性继承

1 .inherAttrs:加入使用子组件时传了a,b,c三个prop,但是子组件仅仅声明了a,b.那么渲染后的c将作为html自定义属性显示在子组件的根元素上
2 .inherAttrs:false 根元素就不会这样做了,变得很干净

组件实例

1 .this.$attrs

1.包含了父作用域中不作为prop被识别且获取的特性绑定,除了class,style除外。当一个组件没有声明任何prop,这里会包括所有父作用域的绑定
2 .简单的来说就是组件的内置属性,值是父组件传入的所有prop中未被组件声明的prop

2 .this.$listeners

1 .包含了父作用域中不含.native修饰器的v-on事件监听器。它通过v-on="listeners"传入内部组件
2 .简单的来说,this.$listeners是组件的内置属性,值是父组件v-on事件监听器
3 .组件可以通过在自己的子组件上使用v-on="$listners",进一步把值传给自己的子组件,如果子组件已经绑定了$listener同名的监听器,那么两个监听器会以冒泡的方式先后执行
4 .
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,635评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,628评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,971评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,986评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,006评论 6 394
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,784评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,475评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,364评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,860评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,008评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,152评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,829评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,490评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,035评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,428评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,127评论 2 356

推荐阅读更多精彩内容

  • 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,...
    兔子不打地鼠打代码阅读 6,368评论 0 1
  • 一、Prop的数据流 父子组件的关系:prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通...
    bouble阅读 469评论 2 1
  • 浅浅地无意识的笑容 粉红色的皮肤 略带蜕皮的肚皮 甜甜的模样 是天使开到人间的印象 拍摄这组照片,是因为妈妈想赶在...
    摄影师李瑕Melissa阅读 204评论 0 2
  • 秋风吹不散你眉弯 文/雨辰 流年不殇谁执笔,浅夏忽忘,在心间。 伊人如梦,秋风吹不散你眉弯,念红尘,灯火阑姗处,看...
    烟殇雨辰阅读 436评论 0 2
  • 這篇文章是對優秀第三方微博安卓APP的推薦。 所有應用裏最毒瘤的當屬微博。自啓的喪心病狂,而且大量地喚醒其他應用,...
    離娮阅读 652评论 3 0