vue.js使用props在父子组件之间传参

本篇文章是我参考官方文档整理的,供大家参考,高手勿喷!

prop

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的 props 选项。

子组件要使用 props选项声明它期待获得的数据

官方的解释非常清晰了:两者之间需要有一个通讯工具才可以获取到对方的数据,props就是这个通讯工具,并且在通讯时需要说明我想得到什么数据;

先从组件之间的作用域说起

<div id="app"> 
<add></add> 
<del></del> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
components: { 
"add": { 
template: "<button>btn:{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
}, 
del: { 
template: "<button>btn:{{btn}}</button>", 
data: function () { 
return {btn: "456"}; 
} 
} 
} 
}); 
</script>

在这段代码里:第一个的值是123,第二个的值是456(虽然他们都是btn)但由于作用域不同,所以不会互相影响

如何使用props绑定静态数据:

【1】这种方法用于传递字符串,且值是写在父组件自定义元素上的。

<add btn="h"></add> 

【2】下面示例中的写法,不能传递父组件data属性中的值

【3】会覆盖模板的data属性中,同名的值。

<div id="app"> 
<add btn="name"></add> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
name: "hello"
}, 
components: { 
"add": { 
props: ['btn'], 
template: "<button>btn:{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
} 
} 
}); 
</script>

这种写法下,btn的值是name,而不是hello。

【4】驼峰写法

假如插值是驼峰式的,

而在html标签中,由于html的特性是不区分大小写(比如LI和li是一样的),因此,html标签中要传递的值要写成短横线式的(如btn-test),以区分大小写。

而在props的数组中,应该和插值保持一致,写成驼峰式的(如btnTest)。

例如:

props: ['btnTest'], 
template: "<button>btn:{{btnTest}}</button>",

正确的写法:

<add btn-test="h"></add>

假如插值写短横线式,或者是html标签写成驼峰式,都不能正常生效。(除非插值不写成驼峰式——跳过大小写的限制,才可以)

利用props绑定动态数据:

简单来说,就是让子组件的某个插值,和父组件的数据保持一致。

标准写法是(利用v-bind):

<add v-bind:子组件的值="父组件的属性"></add>

如代码

<div id="app"> 
<add v-bind:btn="h"></add> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
h: "hello"
}, 
components: { 
"add": { 
props: ['btn'], 
template: "<button>btn:{{btn}}</button>", 
data: function () { 
return {'btn': "123"}; //子组件同名的值被覆盖了 
} 
} 
} 
}); 
</script>

说明:

【1】btn使用的父组件data中 h的值;

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说,使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props,否则他会取用自己data里的btn的值

字面量和动态语法:

【1】简单来说,不加v-bind的,传递的是字面量,即当做字符串(例如1也是字符串,而不是number类型);

【2】加上v-bind的,传递的是JS表达式(因此才能传递父组件的值);

【3】加上v-bind后,如果能找到父组件的值,那么使用父组件的值;如果没有对应的,则将其看做一个js表达式(例如1+2看做3,{a:1}看做是一个对象);

<div id="app"> 
<add v-bind:btn="1+2"></add> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
h: "hello"
}, 
components: { 
"add": { 
props: ['btn'], 
template: "<button>btn:{{btn}}</button>"
} 
} 
}); 
</script>

这里的btn的值是3(而不是没有加v-bind时,作为字符串的1+2)

props的绑定类型:

【1】简单来说,分为两种类型,即单向绑定(父组件能影响子组件,但相反不行)和双向绑定(子组件也能影响父组件);

【2】单向绑定示例:(默认,或使用.once)

<div id="app"> 
父组件: 
<input v-model="val"><br/> 
子组件: 
<test v-bind:test-Val="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components: { 
"test": { 
props: ['testVal'], 
template: "<input v-model='testVal'/>"
} 
} 
}); 
</script>

说明:

当父组件的值被更改后,子组件的值也随之更改;

当子组件的值被更改后,父组件的值不会变化,而假如再次修改父组件的值,子组件会再次同步。

另外需要注意的是,子组件如果要同步绑定,那么子组件的input需要是v-model,而不能是value属性(那样只能单项绑定,且修改子组件的值后会失去绑定)

【3】双向绑定:

需要使用“.sync”作为修饰词

如示例:

<div id="app"> 
父组件: 
<input v-model="val"><br/> 
子组件: 
<test :test.sync="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components: { 
"test": { 
props: ['test'], 
template: "<input v-model='test'/>"
} 
} 
}); 
</script>

效果是无论你改哪一个的值,另外一个都会随之变动。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3165
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25310
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717
来自专栏杨龙飞前端

scrollto 到指定位置

2514
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4045
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4064
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2792
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5496

扫码关注云+社区