vue组件中使用props传递数据的实例详解


Posted in Javascript onApril 08, 2018

在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的。

vue组件中使用props传递数据的实例详解

 一、基本用法

组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。

在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象。

1.1 字符串数组:

<div id="app4">
   <my-component4 message="数据来自父组件"></my-component4>
  </div>
Vue.component('my-component4',{
 props: ['message'],
 template: '<div>{{message}}</div>'
});
var app4 = new Vue({
 el: '#app4'
});

渲染后的结果为:

<div id= ” app4”>
<div >来自父组件的数据</ div>
</div>

props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级,而data 中的是组件自己的数据,作用域是组件本身,这两种数据都可以在模板template 及计算属性computed和方法methods 中使用。

上例的数据message 就是通过props 从父级传递过来的,在组件的自定义标签上直接写该props 的名称,如果要传递多个数据,在props 数组中添加项即可。

有时候,传递的数据并不是直接写死的,而是来自父级的动态数据,这时可以使用指令v -bind来动态绑定props 的值,当父组件的数据变化时,也会传递给子组件。

<div id="app5">
   <input type="text" v-model="text">
   <my-component5 :my-text="text"></my-component5>
  </div>
Vue.component('my-component5',{
 props: ['myText'],
 template: '<div>{{myText}}</div>'
});
var app5 = new Vue({
 el: '#app5',
 data: {
  text: '动态传递父组件数据'
 }
});

注意的几个点:

1.如果你要直接传递数字、布尔值、数组、对象,而且不使用v-bind ,传递的仅仅是字符串。

vue组件中使用props传递数据的实例详解

2.如果你想把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如,已知一个 todo 对象:

vue组件中使用props传递数据的实例详解

1.2 对象:

当prop 需要验证时,就需要对象写法。

一般当你的组件需要提供给别人使用时,推荐都进行数据验证,比如某个数据必须是数字类型,如果传入字符串,就会在控制台弹出警告。

<div id="app6">
   <input type="text" v-model="number">
   <my-component6 :my-text="number"></my-component6>
  </div>
Vue.component('my-component6',{
 props: {
  'myText':{
   type: Number, //必须是数字类型的
   required: true, //必须传值
   default: 1 //如果未定义,默认值就是1
  }
 },
 template: '<div>{{myText}}</div>'
});
var app6 = new Vue({
 el: '#app6',
 data: {
  number: 1
 }
});

验证的type 类型可以是:

• String
• Number
• Boolean
• Object
• Array
• Function

type 也可以是一个自定义构造器,使用instanceof 检测。

当prop 验证失败时,在开发版本下会在控制台抛出一条警告。

二、单向数据流

Vue 2.x 与Vue l.x 比较大的一个改变就是, Vue2.x 通过props 传递数据是单向的了, 也就是父组件数据变化时会传递给子组件,但是反过来不行。

业务中会经常遇到两种需要改变prop 的情况,

2.1 一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。(Prop 作为初始值传入后,子组件想把它当作局部数据来用;)

这种情况可以在组件data 内再声明一个数据,引用父组件的prop ,示例代码如下: 

<div id="app7">
   <my-component7 :init-count="1"></my-component7>
  </div>
Vue.component('my-component7',{
 props: ['initCount'],
 template: '<div>{{count}}</div>',
 data: function(){
  return {
   count: this.initCount
  }
 }
});
var app7 = new Vue({
 el: '#app7'
});

组件中声明了数据count , 它在组件初始化时会获取来自父组件的initCount , 之后就与之无关了,只用维护c ount , 这样就可以避免直接操作initCount 。

2.2 prop 作为需要被转变的原始值传入。(Prop 作为原始数据传入,由子组件处理成其它数据输出。)

这种情况用计算属性就可以了, 示例代码如下:

<div id="app8">
   <my-component8 :width="100"></my-component8>
  </div>
Vue.component('my-component8',{
 props: ['width'],
 template: '<div :style="style">组件内容</div>',
 computed: {
  style: function(){
   return {
    width: this.width+'px'
   }
  }
 }
});
var app8 = new Vue({
 el: '#app8'
});

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

总结

以上所述是小编给大家介绍的vue组件中使用props传递数据的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
Vue入门之animate过渡动画效果
Apr 08 #Javascript
vue组件与复用详解
Apr 08 #Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 #Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 #Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 #Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 #Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
ThinkPHP模型详解
2015/07/27 PHP
许愿墙中用到的函数
2006/10/07 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
Python实现简单的代理服务器
2015/07/25 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
Python count函数使用方法实例解析
2020/03/23 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
软件工程专业推荐信
2013/10/28 职场文书
政治表现评语
2014/05/04 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
物业工程部岗位职责
2015/02/11 职场文书
党支部意见范文
2015/06/02 职场文书
优秀员工演讲稿
2019/06/21 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js