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

相关文章

来自专栏强仔仔

JQuery之内置函数响应事件

今天给大家介绍一下on函数中events的种类和用法。 具体我把它分为:键盘事件,鼠标事件,input事件,还有一个是基础事件(例如:滚动,界面大小变化等等之类...

1756
来自专栏漫漫全栈路

JSP Cheat Sheet - JavaWeb基础学习速查表

JavaWeb学习速查表 整理JavaWeb学习中遇到的问题以及笔记,按分类编排 JSP基本语法 指令标识 - 脚本标识 - JSP注释 - 动作标识 JSP内...

3605
来自专栏无原型不设计

【Mockplus使用技巧】怎样在Mockplus中锁定背景

在设计时,我们会发现,有时候,作为背景的图片或者容器(比如面板组件),因为面积比较大,或时不时地影响到它上面的组件的操作。 这个时候,我们可以锁定这个图片或...

2766
来自专栏HTML5学堂

postMessage与postMessage跨域

HTML5学堂今日postMessage跨域教学流程 先为大家讲解postMessage的基本知识 之后,我们书写一个实例:使用静态的iframe,实现A域前端...

3626
来自专栏极客编程

vue.js快速上手

  Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。

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

Vue.js组件

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

1074
来自专栏HTML5学堂

点击块,让小块动起来 - 函数封装

上一期我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式,它是实现页面交互效果的重要基础知识。如果想具体了解JS设置标签的内容和样式,可以回复“标...

28612
来自专栏Django中文社区

Python 小爬虫 - 爬取今日头条街拍美女图

先实际感受一下我们要抓取的福利是什么?点击 今日头条,在搜索栏输入街拍 两个字,点开任意一篇文章,里面的图片即是我们要抓取的内容。 ? 可以看到搜索结果默认返回...

3265
来自专栏开源项目

Git 项目推荐 | javascript ajax 代理调用工具

javascript ajax 代理调用工具 。 AjaxProxy url: /template/default/script/AjaxProxy.js; 接...

2879
来自专栏HTML5学堂

前端特效开发 | 图片翻转的制作

HTML5学堂(码匠):在前端开发中,针对效果层面的开发,使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果,我们能否考虑借助某些简...

3137

扫码关注云+社区