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实现按钮颜色渐变动画效果
Aug 20 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
7个你应该知道的JS原生错误类型
Apr 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
php 表单数据的获取代码
2009/03/10 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
python复制与引用用法分析
2015/04/08 Python
Python自动登录126邮箱的方法
2015/07/10 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Scrapy框架使用的基本知识
2018/10/21 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
国际贸易专业个人鉴定
2014/02/22 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书