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 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
详解如何在react中搭建d3力导向图
Jan 12 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
深入了解JavaScript词法作用域
Jul 29 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
如何删除多级目录
2006/10/09 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python PyQt5整理介绍
2020/04/01 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
linux面试题参考答案(5)
2016/11/05 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
打造完美自荐信
2014/01/24 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
nginx配置指令之server_name的具体使用
2022/08/14 Servers