数据下发

组件实例的作用域是相互独立的,父、子组件之间无法进行数据的共享。
如果想在子组件模板中使用父组件的数据,可以通过Prop将父组件的数据下发到子组件。子组件用props选项声明它预期的数据。

为了传递数据,父组件必须先在子组件自定义标签的特性上绑定数据,绑定的值分两种情况解析:

  • 字面量 prop="value"
  • 表达式(动态绑定) v-bind:prop="expression"
  • 表达式特例 v-bind="Object"
new Vue({
el: '#app-1',
data: {
parentMsg: 'root\'s dynamic data',
parentObj: {
text:'hello vue!',
isShow: true
},
},
components: {
'component-1': {
props: ['expectMsg','expectDynamicMsg','expectObj','text','isShow'],
template: '\
<div>\
<p>{{expectMsg}}</p>\
<p>{{expectDynamicMsg}}</p>\
<p v-show="expectObj.isShow">{{expectObj.text}}</p>\
<p v-show="isShow">{{text}}</p>\
</div>'
}
<div id="app-1">
<!-- 字面量绑定、动态绑定、动态绑定一个对象、动态绑定特例 -->
<component-1 expect-msg="static data"
v-bind:expect-dynamic-msg="parentMsg"
v-bind:expect-obj="parentObj"
v-bind="parentObj">
</component-1>
</div>

这里分别作了几种绑定的示例:

  • 把字符串"static data"绑定到子组件的propsexpectMsg
  • 把父组件属性parentMsg动态绑定到子组件的expectDynamicMsg特性上
  • 把父组件中的一个对象parentObj动态绑定到子组件的expectObj特性上
  • 把父组件中的parentObj对象的属性text、isShow绑定到子组件的textisShow特性上

注意:要下发一个数字给子组件不能使用字面量绑定,字面量下发的都是字符串。因此需要动态绑定

<component v-bind:some-number="1">

Prop验证

当要对下发数据做验证或在无数据时设置默认值,子组件选项props就需要使用一个对象替换数组。
简单的情况:

props:{
someProp:String
}

下发数据必须是一个字符串

复杂点可以设置默认值与验证器,如:

new Vue({
el: '#app-2',
data:{
message:{
title:'prop验证',
text:'父组件数据'
}
},
components: {
'component-2': {
props: {
propObj:{
type:Object,
//下发对象的title属性必须是个字符串
validator:function(value){
return typeof value.title === "string"
},
//下发数据为一个数组或对象,设置的默认值必须由一个函数返回
default:function(){
return {title:'prop验证',text:'数组/对象的默认值应当由一个工厂函数返回'}
}
}
},
template: '<div><h5>{{propObj.title}}</h5><p>{{propObj.text}}</p></div>'
}
}
})
<div id="app-2">
<component-2 v-bind:prop-obj="message"></component-2>
</div>

type属性也可以是一个函数,使用instanceof验证。验证在子组件实例创建之前进行,因此验证里的任何函数都无法使用子组件实例属性。

更多类型验证 Prop验证

Prop的单向绑定和双向绑定

下发数据实际上就是完成一个数据绑定的过程,把组件间的特定数据绑定在一起,默认情况下为单向绑定,子组件的数据对于父组件是透明的,而父组件的数据变化则会引发子组件数据的变化。

new Vue({
el: '#app-3',
data: {
content: "please input..."
},
components: {
'component-3': {
props:['txt'],
template:'<div><input v-model="txt"></div>'
}
}
})
<div id="app-3">
<input v-model="content">
<br/>
<component-3 v-bind:txt="content"></component-3>
</div>

父组件通过Prop下发数据,将父组件属性content和子组件特性txt绑定在一起,在第一文本框输入值改变content的内容,子组件的txt会跟随变化,显示在第二个文本框中。

如果在子模板第二个文本框输入,修改txt的值时,父组件控制的第一个文本框内容不会改变。

并在控制台给出警告,说不要修改props选项中的值,作为代替,可以让prop的值赋予data或者computed属性使用。因此可以像下面这样用data替代prop作为一个局部变量。

'component-3': {
props:['txt'],
template:'<div><input v-model="txtData"></div>',
data:function(){
return {txtData:this.txt}
}
}

若只考虑输出不考虑输入,也可以使用计算属性替代

'component-3': {
props: ['txt'],
template: '<div><input v-model="txtComputed"></div>',
computed: {
txtComputed:function() {
return this.txt
}
}
}

非Prop特性

组件的作者却并不总能预见到组件被使用的场景。所以,组件可以接收任意传入的特性,这些特性都会被添加到组件的根元素上,而不需要定义响应的props

var vm = new Vue({
el: '#app-4',
components: {
"component-4": {
template: "<button class='btn-sm'>hello vue!</button>"
}
}
});
<div id="app-4">
<component-4 data-title="learn vue" class="btn-info"></component-4>
</div>

渲染结果

<button class="btn-sm btn btn-info" data-title="learn vue">hello vue!</button>

其中data-titleclass就是非Prop特性。
因为没有在组件中定义props,因此也无法去引用它们,作用目前不明显。

从渲染结果还可以发现,class特性的值由子组件模板和父模板定义的特性合并而成,对于classstyle是这样合并结果。但对于多数组件来说,传递给组件的值会覆盖组件本身设定的值。

组件(2):使用Prop下发数据的更多相关文章

  1. 组件之间使用Prop传递数据

    <div id="example"> <father></father> </div> <script src="h ...

  2. vue组件 Prop传递数据

    组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...

  3. vue prop 传递数据

    prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 一个组件默认可以拥有任意数量的 p ...

  4. vue父组件异步传递prop到子组件echarts画图问题踩坑总结

    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...

  5. Vue父组件传递异步获取的数据给子组件

    问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...

  6. vue父子组件通信(prop)

    先定义子组件,注册prop接收父组件传递的值 <template> <div> <div>{{message}}(子组件)</div> </div ...

  7. 通过SSIS的“查找”组件进行不同数据源之间数据的合并操作

    原文:通过SSIS的"查找"组件进行不同数据源之间数据的合并操作 为了协助开发还原生产环境中的某些bug,需要将将生产环境的某些特定表数据导入到测试环境做测试,之前一直都是暴力地t ...

  8. 14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表

    /** * Flutter StatefulWidget有状态组件.页面上绑定数据.改变页面数据 * 在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/Stat ...

  9. vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总

    目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...

随机推荐

  1. python-Web-项目-svn和git

    SVN概念: >>>本地服务端 >>>服务端: 安装:windows傻瓜式安装 使用: 1 在弹出的右键菜单中选择Create New Repository或者新建 ...

  2. 使用URLOS 五分钟安装rTorrent (轻量级优秀BT/PT客户端)

    rTorrent是一个非常简洁.优秀.非常轻量的BT客户端,它使用ncurses库以C++编写,将 rTorrent 用在安装有 GNU Screen 和 Secure Shell 的低端系统上作为远 ...

  3. 5分钟了解图数据库Neo4j的使用

    1.图数据库安装与配置 1.1安装与配置 配置path = %NEO4J_HOME%\bin   启动命令:neo4j console   web访问:http://localhost:7474 1. ...

  4. Leetcode之深度+广度优先搜索(DFS+BFS)专题-934. 最短的桥(Shortest Bridge)

    Leetcode之广度优先搜索(BFS)专题-934. 最短的桥(Shortest Bridge) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary ...

  5. 【Linux开发】linux设备驱动归纳总结(三):3.设备驱动面向对象思想和lseek的实现

    linux设备驱动归纳总结(三):3.设备驱动面向对象思想和lseek的实现 一.结构体struct file和struct inode 在之前写的函数,全部是定义了一些零散的全局变量.有没有办法整合 ...

  6. flask_script

    Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...

  7. analyticdb(ADB) group by 用法小结

    虽说analyticdb(ADB)是支持mysql协议的,但有些具体细节用法是有些区别. 1.group by 字段 mysql group by select id,title,describe w ...

  8. MSF魔鬼训练营-3.5.3 MSF中常用的关于数据库的命令

    渗透测试数据库用来保存渗透测试过程中获取的各种数据,很多时候你重启了kali发现连接不上数据库了,其实就是因为这个服务没开 MSF所使用的数据库时postgresql root@kali:/# ser ...

  9. 2019牛客暑期多校训练营(第一场)-A (单调栈)

    题目链接:https://ac.nowcoder.com/acm/contest/881/A 题意:给定两个长度均为n的数组a和b,求最大的p使得(a1,ap)和(b1,bp)等价,等价的定义为其任意 ...

  10. OI模板のpoke流[大型考试复习必备/kl]

    数论 快速乘: ll qmul(ll x,ll y,ll mod) { ll ans=0; while(y) { if(y&1) (ans+=x)%=mod; y>>=1; (x+ ...