vue组件详解(二)——使用props传递数据
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 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 ,传递的仅仅是字符串。
2.如果你想把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的 v-bind
(即用 v-bind
而不是 v-bind:prop-name
)。例如,已知一个 todo
对象:
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传递数据的更多相关文章
- vue组件详解——使用props传递数据
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...
- vue组件详解(四)——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- vue组件详解——使用slot分发内容
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...
- vue组件详解(三)——组件通信
组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. 一.自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件. 子组件用$emit ()来触发事件,父组件 ...
- vue组件详解——组件通信
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. ...
- 6. vue组件详解(一)
主要内容: 1. 组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 父子组件的通信 组件系统是 Vue 的一个重要概念,因为它 ...
- vue组件详解(五)——组件高级用法
一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-compone ...
- react router @4 和 vue路由 详解(二)react-router @4用法
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 2.react-router @4用法 a.大概目录 不需要像vue那样麻烦的 ...
- vue组件详解(一)——组件与复用
一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种 ...
随机推荐
- lambda表达式封装对数据库的查询
前言: 1.为什么要封装lambda表达式数据库查询,原因有一下几点: 1.1.在以往的开发中进行数据库表查询时,其实所需要的字段就是其中几个,但是在开发中,开发者往往习惯select * 进行查询, ...
- IM-iOS退出后台接受消息,app退出后台能接收到推送
App被失活状态的时候可以走苹果的APNS:但是在活跃的时候却接受不到推送! 那就用到本地推送:UILocalNotification 消息神器. 处理不好可能会有很多本地推送到来,那么问题来了要在什 ...
- 解决新电脑的系统安装问题:针对BIOS的UEFI模式
安装win7或win8系统时UEFI和Legacy模式的设置 新的的笔记本或台式机主板都开始支持UEFI模式,不过这种模式让很多打算给电脑换win7或win8的用户头疼不已,尤其是笔记本用户. ...
- java web 项目中获取当前路径的几种方法
1.jsp中取得路径: 以工程名为TEST为例: (1)得到包含工程名的当前页面全路径:request.getRequestURI() 结果:/TEST/test.jsp (2)得到工程名:req ...
- linux(ubuntu)环境下安装及配置JDK
安装完IDEA之后遇到了问题,发现jdk安装完之后配置环境变量好困难,下面总结一下我的安装及配置方式: JDK下载链接:http://download.oracle.com/otn-pub/java/ ...
- 使用 win10 的正确姿势
17年9月初,写了第一篇<使用 win10 的正确姿势>,而现在半年多过去,觉得文章得更新一些了,索性直接来个第二版吧. -----2018.3.24 写 一. 重新定义桌面 我的桌面: ...
- Go实现海量日志收集系统(一)
项目背景 每个系统都有日志,当系统出现问题时,需要通过日志解决问题 当系统机器比较少时,登陆到服务器上查看即可满足 当系统机器规模巨大,登陆到机器上查看几乎不现实 当然即使是机器规模不大,一个系统通常 ...
- 插入排序—直接插入排序(Straight Insertion Sort)
基本思想: 将一个记录插入到已排序好的有序表中,从而得到一个新,记录数增1的有序表.即:先将序列的第1个记录看成是一个有序的子序列,然后从第2个记录逐个进行插插入到已入,直至整个序列有序为止. 要点: ...
- java排序算法(九):归并排序
java排序算法(九):归并排序
- python(函数)
Python中的namespace Python中通过提供 namespace 来实现重名函数/方法.变量等信息的识别,其一共有三种 namespace,分别为: local namespace: 作 ...