Vue2.x中的父组件传递数据至子组件的方法


Posted in Javascript onMay 01, 2017

父组件结构

template

<template>
 <div>
 <v-girl-group 
  :girls="aGirls"></v-girl-group>
 </div>
</template>

script

<script>
import vGirlGroup from './GirlGroup'
export default {
 name: 'girl',
 components: {
 vGirlGroup
 },
 data () {
 return {
  aGirls:[{
  name:'小丽',
  age:22
  },{
  name:'小美',
  age:21
  },{
  name:'小荷',
  age:24
  }]
 }
 }
}
</script>

注意的点:

•子组件的拼写方式:vGirlGroup写成v-girl-group
•这里子组件中的绑定数据是:girls="aGirls",这里的aGirls数据是父组件中的data,girls是要传递至子组件的属性

子组件结构

template

<template>
 <div>
 <ul>
  <li v-for="(value, index) in girls">{{ index }} - {{ value.name }} - {{ value.age }}</li>
 </ul>
 </div>
</template>

注意的点:

•v-for的遍历对象时的参数顺序-变更 具体见:https://cn.vuejs.org/v2/guide/migration.html#v-for-遍历对象时的参数顺序-变更
•v-for中$index和$key这两个隐式声明的变量移除 具体见:https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除

<script>
export default {
 name: 'girl-group',
 props: {
 girls: {
  type: Array,
  required: true
 }
 }
}
</script>

注意点:

•props中的数据是来自在父组件中绑定在子组件上的值 另外:使用IDE、编辑器开发时,可能会提示成prop
•girls中对数据做了一些校验

结果

Vue2.x中的父组件传递数据至子组件的方法

以上所述是小编给大家介绍的Vue2.x中的父组件数据传递至子组件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 #jQuery
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 #Javascript
node.js 抓取代理ip实例代码
Apr 30 #Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 #Javascript
socket.io学习教程之基本应用(二)
Apr 29 #Javascript
socket.io学习教程之基础介绍(一)
Apr 29 #Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 #Javascript
You might like
生成静态页面的PHP类
2006/07/15 PHP
十天学会php之第四天
2006/10/09 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
Javascript的闭包
2009/12/31 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
canvas时钟效果
2017/02/16 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
python中实现延时回调普通函数示例代码
2017/09/08 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python版中国省市经纬度
2020/02/11 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
小型女装店的创业计划书
2014/01/09 职场文书
法律六进活动方案
2014/03/13 职场文书
平安建设实施方案
2014/03/19 职场文书
党员干部一句话承诺
2014/05/30 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
详解Go语言中Get/Post请求测试
2022/06/01 Golang