文档章节

Vue.js学习系列(四十三)-- 使用props传递数据

博为峰教研组
 博为峰教研组
发布于 2017/04/05 19:09
字数 230
阅读 12
收藏 0

组件实例的作用域是孤立的,这就意味着不能并且不应该在子组件模板内直接引用父组件的数据,

prop 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop":

下面我们就通过一个实例将message:hello传递给子组件。

运行之后,将“hello”显示的span标签上。

动态Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:

 

运行结果如下:

 

当修改文本框中的内容,span的文本值也会随着改变。

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消...

mdiep
05/13
0
0
聊聊Vue.js组件间通信的几种姿势

写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:https://github.com/answershuto/learnV...

染陌同学
2017/10/22
0
2
Vue props 单向数据流

1、props通信 注意:DOM模板的驼峰命名props要转为短横分割命名。 传递动态数据(v-bind): 2、单向数据流 (1)子组件保存父组件传递过来的值,在子组件自己的作用域下修改和使用。 (2)使...

peakedness丶
11/05
0
0
React,迁移到 Vue 的心路历程

原文https://mp.weixin.qq.com/s/-Mss0-6m9rGTasTpF2iOA 前几年我一直在使用 React。最初仅有 React,后来使用 Redux 和 React 的其他库(react-router、react-redux、prop-types 等)配合使...

大灰狼的小绵羊哥哥
10/13
0
0
优雅的使用vue父组件通过props向子组件传递

在Vue 中,可以使用 props 向子组件传递数据,下面这篇文章主要给大家介绍了关于vue父组件通过props如何向子组件传递方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴...

前端攻城老湿
11/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

区块链安全 - 以太坊短地址攻击

1 基础知识 EVM虚拟机在解析合约的字节码时,依赖的是ABI的定义,从而去识别各个字段位于字节码的什么地方。关于ABI,可以阅读这个文档: https://github.com/ethereum/wiki/wiki/Ethereum-C...

HiBlock
20分钟前
1
0
自定义函数及内部函数

变量的作用域 局部变量 global $Global及其他超全局数组 静态变量 仅初始化赋值 保留于内存直到response才销毁 global和static变量的区别 global:局部变量全局话 static:定义静态局部变量 函...

关元
21分钟前
1
0

中国龙-扬科
33分钟前
1
0
python包

https://www.lfd.uci.edu/~gohlke/pythonlibs/

陆朋
43分钟前
1
0
一文弄懂“分布式锁”,一直以来你的选择依据正确吗?

本文主要会关注的问题是“分布式锁”的问题。 多线程情况下对共享资源的操作需要加锁,避免数据被写乱,在分布式系统中,这个问题也是存在的,此时就需要一个分布式锁服务。 常见的分布式锁实...

Java干货分享
51分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部