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 条评论
登录 后参与评论

相关文章

来自专栏前端布道

Angular开发实践(四):组件之间的交互

在Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。 根据数据的传递方向,分为父组件...

4038
来自专栏用户3211691的专栏

1、深入浅出React(一)

npm start启动开发环境,npm run build创建生产环境优化代码,npm test用于测试单元,npm run eject把潜藏在react-sc...

241
来自专栏dotnet core相关

jQuery.prop , jQuery.attr ,jQuery.data

jquery.prop 获取匹配的元素中第一个元素特定的属性值,或者是设置多个元素的属性值。

562
来自专栏java沉淀

jQuery常用的功能

903
来自专栏Python小屋

Python查找Word文件中红色和加粗的文字

背景知识:docx文件的结构分为三层,1、Docment对象表示整个文档;2、Docment包含了Paragraph对象的列表,每个Paragraph对象用来表...

2858
来自专栏自由而无用的灵魂的碎碎念

转: 细说HTML元素的ID和Name属性的区别

可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案...

713
来自专栏GreenLeaves

Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别

Jquery是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载入后执行的函数。 $(document).ready(functio...

1K5
来自专栏前端小叙

vue父组件向子组件动态传值的两种方法

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行...

39410
来自专栏james大数据架构

MVC利用MvcHtmlString在后台生成HTML

后台: /// <summary> /// 生成分类下拉-列表框,选中指定的项 /// </summary> /...

1676
来自专栏河湾欢儿的专栏

Vue.js组件

组件: 顾名思义, 也就是组成的部件, 即整体的组成部分 这个组成部分是可以缺少的,但是其存在的意义是无可替代的 这个组成部分也是可以复用的 全局方法一:...

914

扫描关注云+社区