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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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/10/09 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
PHP防止跨域提交表单
2013/11/01 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
document.open() 与 document.write()的区别
2007/08/13 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
python del()函数用法
2013/03/24 Python
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
人事文员岗位职责
2014/02/16 职场文书
yy生日主持词
2014/03/20 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
担保书怎么写 ?
2019/04/22 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
JAVA springCloud项目搭建流程
2022/05/11 Java/Android