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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
js制作提示框插件
Dec 24 Javascript
原生JavaScript实现换肤
Feb 19 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Js中获取frames中的元素示例代码
2013/07/30 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python实现文件按照日期命名的方法
2015/07/09 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
使用pandas读取文件的实现
2019/07/31 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
python如何输出反斜杠
2020/06/18 Python
python的flask框架难学吗
2020/07/31 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
小区文明倡议书
2014/05/16 职场文书
婚礼秀策划方案
2014/05/19 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
班主任工作总结范文
2015/08/13 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书