vue的props和$attrs
过去我们在vue的父子组件传值的时候,我们先需要的子组件上用props注册一些属性:
<template>
<div>
props:{{name}},{{age}} 或者 {{$props['name']}},{{$props['age']}}
</div>
</template> export default{
props: ['name','age']
}
然后父组件调用的时候当属性来传值
<child name="rick" :age="18"></child>
如果我们给child传props没有注册的属性,我们就要用$attrs来取了
<child name="rick" :age="18" gender="male"></child>
child:
<template>
<div>
props:{{name}},{{age}} 或者 {{$props['name']}},{{$props['age']}}
<br>
attrs: {{$attrs['gender']}} 在$attrs里面只会有props没有注册的属性
</div>
</template> export default{
props: ['name','age']
}
当然这个$attrs是vue2.4才推出的,为了简化父组件和孙组件的传值:
父组件 template(假设gender属性没有被props注册):
<child1 gender="male"></child1>
child1 template(v-bind=”$attrs”,这是v-bind唯一可以直接跟等号的特殊写法):
<child2 v-bind=”$attrs”></child2>
在child2里面,就可以直接用props注册gender,来直接获取来自“祖父组件”的gender值了(当然,不注册也是可以用$attrs来取值的)
vue的props和$attrs的更多相关文章
- vue组件通信(props,$emit,$attrs,$listeners)
朝颜陌 vue基础----组件通信(props,$emit,$attrs,$listeners) 一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. ...
- vue基础----组件通信(props,$emit,$attrs,$listeners)
一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 <body> <div id= ...
- Vue - 组件通信之$attrs、$listeners
前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个 ...
- vue & components & props & methods & callback
vue & components & props & methods & callback demo solution 1 & props & data ...
- [转]Vue中用props给data赋初始值遇到的问题解决
原文地址:https://segmentfault.com/a/1190000017149162 2018-11-28更:文章发布后因为存在理解错误,经@Kim09AI同学提醒后做了调整,在此深表感谢 ...
- Vue中用props给data赋初始值遇到的问题解决
Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14 作者:yuyongyu 我要评论 这篇文章主要介绍了Vue中用props给dat ...
- Vue computed props pass params
Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...
- vue & watch props
vue & watch props bug OK watch: { // props // chatObj: () => { // // bug // log(`this.chatObj ...
- vue & modal props & form data update bug
vue & modal props & form data update bug OK <div> <BindModal :dialogBindVisible=&qu ...
随机推荐
- No.1000_第五次团队会议
光辉的一夜 今夜注定是不平凡的一夜.是崔强同学伟大的一夜. 昨天因为实验室项目,我刚上完编译课就被学院叫走去做项目,当时我就很无奈,因为说好了要和崔强一起实现下午的前端,他写界面我写底层逻辑,这样我们 ...
- YQCB冲刺周第四天
上图站立会议 任务看板: 今天的任务:做登录身份的验证,区别普通用户和超级管理员 遇到的困难:中文乱码问题
- c# combobox向上展开
1.问题情境:实际中的下拉框默认向下扩展,如果屏幕下方空间不足,会向上扩展. 向下扩展情况下,有时候会超出form窗体. 2.解决办法: 寻找相关属性无果. 退而求其次,重画item的框.发现Draw ...
- C++:new&delete
一.new的浅析 在C++中,new主要由三种形式:new operator.operator new和placement new • new operator new operator即一些C++书 ...
- 【数据预处理】TIMIT语料库WAV文件转换
1 问题描述 这两天复现代码.先构造数据集,纯净语音.不同噪声.不同SNR的混合语音.其中纯净语音由两部分组成,IEEE corpus和TIMIT. 一开始我用MATLAB中的audioread读取音 ...
- 四则运算App--大总结(已完成)
1. 贡献分分配(20分) 欧泽波:14分,Android的学习,代码的编写,等等 杨洁华:1分,提供学习资料,框架的设计等等 赵泽嘉:3分,提供学习资料,框架的设计等等 林扬滨:2分,提供学习资料, ...
- 简单复利计算c语言实现
#include<stdio.h>#include<math.h>float i; //利率 float p; //期初金额 float F; //未来值 int n; //期 ...
- HTML与URL两种录制模式分析(转)
如何选择两种模式? 1.基于浏览器的应用程序推荐使用HTML-Based Script. 2.不是基于浏览器的应用程序推荐使用URL-Based Script. 3.如果基于浏览器的应用程序中包含了J ...
- [转帖 cnblog 的news ]技术实力超群的Netflix,为何没有CTO
技术实力超群的Netflix,为何没有CTO https://news.cnblogs.com/n/581824/ 投递人 itwriter 发布于 2017-11-05 16:12 评论(2) 有1 ...
- NeuralEnhance: 提高图像分辨率的深度学习模型
NeuralEnhance是使用深度学习训练的提高图像分辨率的模型,使用Python开发,项目地址:https://github.com/alexjc/neural-enhance. 貌似很多电影都有 ...