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 相关文章推荐
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
JavaScript登录验证基础教程
Nov 01 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
深入理解Python中的内置常量
2017/05/20 Python
python实现学生管理系统
2018/01/11 Python
django中的图片验证码功能
2019/09/18 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
台湾生鲜宅配:大口市集
2017/10/14 全球购物
为什么要使用servlet
2016/01/17 面试题
希特勒的演讲稿
2014/05/23 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
公司租房协议书
2014/10/14 职场文书
优秀校长事迹材料
2014/12/24 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
python 远程执行命令的详细代码
2022/02/15 Python
浅析python中特殊文件和特殊函数
2022/02/24 Python
一级电子管军用接收机测评
2022/04/05 无线电
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS