Vuejs——(9)组件——props数据传递
本篇资料来于官方文档:
http://cn.vuejs.org/guide/components.html#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>
渲染结果是:
2个按钮,第一个的值是123,第二个的值是456(虽然他们都是btn)
②使用props绑定静态数据:
【1】这种方法用于传递字符串,且值是写在父组件自定义元素上的。
【2】下面示例中的写法,不能传递父组件data属性中的值
【3】会覆盖模板的data属性中,同名的值。
示例代码:
<div id="app"><add 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>
这种写法下,btn的值是h,而不是123,或者是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>
效果是无论你改哪一个的值,另外一个都会随之变动。
【4】props验证:
简单来说,当组件获取数据时,进行验证,只有符合条件的时候,才会使用之。
写法是将props变为一个对象,被验证是值是对象的key,验证条件是和key对应的value。
例如:
props: {test: {twoWay: true}
},
验证test这个变量是不是双向绑定,如果不是,则报错。(注意,这个不能用于验证单向绑定)。
示例代码如下:
<div id="app">父组件:<input v-model="val"><br/>子组件:<test :test="val"></test>
</div>
<script>var vm = new Vue({el: '#app',data: {val: 1},components:{test:{props: {test: {twoWay: true}},template: "<input v-model='test'/>"}}});
</script>
更多验证类型请查看官方教程:
http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1
Vuejs——(9)组件——props数据传递相关推荐
- VUE组件:组件的数据传递(props)
组件的数据传递 props的作用 使用props流程 ①给组件添加props选项 ②在调用组件时传入实际参数即可 ③完整代码及效果 ④使用props传递分析 使用props传递数据时的一些细节 ①传参 ...
- 三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) ...
- html用vue传递数据,Vue组件及数据传递详解
本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...
- 浅入深出Vue:子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- vue组件之间数据传递和通信方式总结
vue组件之间数据传递和通信方式总结 方式主要包括: 父组件=>子组件 | 单向数据流,props 子组件=>父组件 | 观察者模式,即vue的自定义事件 $emit 和 $on 非父子组 ...
- Vue props数据传递
前面的话 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信.组件接受的选项大部分与 Vue实例一样,而选项props是组件中非常重要的一个选项.在Vue中,父子组件的关系可以总结为 pr ...
- Android组件间数据传递
Intent是什么? 是一种在运行时绑定的,链接程序中两个不同组件的组件 Intent做什么? 1 向Android操作系统请求资源 2 组件之间进行数据传递(通信) ...
- vue 组件之间数据传递(七)
1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...
最新文章
- 华南主板bios怎么恢复出厂设置_主板电池放电清BIOS恢复出厂设置怎么操作?配图文...
- 解决iOS机型点击输入框不能聚焦的问题
- Failed to import pydot. You must install pydot and graphviz for `pydotprint` to work.
- Vijos——T 1082 丛林探险
- oracle的打开图标,Oracle的SQL Developer 在Ubuntu上以图标显示且双击能运行
- 嵌入式Linux内核移植相关代码分析(转)
- 数据库连接池的设计思路及java实现
- html js css如何关联_会html+css+js就能把前端项目发布到多个平台
- CentOS6.5安装与配置Mysql数据库
- 常见的SAS接口类型、接口连接器外观详细解读
- 计算单应性矩阵 python_计算视觉——相机参数标定法
- Hping3 拒绝服务攻击手册
- html页面保存到本地文件路径,js上传文件到指定路径 jQuery或者js保存文件到本地...
- IMSettings 1.5.1 发布,输入法设置工具
- 安全测试工具有哪些?
- 金山词霸每日一句开放平台 .NET demo
- 商务与经济统计阅读笔记3
- oracle假如存在才删除该字段,Oracle删除表、字段之前判断表、字段是否存在
- 什么牌子的无线耳机最好?最好的蓝牙耳机排行榜
- 超详细,Python库 Bokeh 数据可视化实用指南