Vue2.x中的父组件传递数据至子组件的实例内容

  • 更新时间:2020-05-28 16:05:51
  • 编辑:刘飞宇
为网友们分享了相关的编程文章,网友盖昊苍根据主题投稿了本篇教程内容,涉及到vue、组件传递数据、vue父子组件传递数据、Vue2.x中的父组件传递数据至子组件的方法相关内容,已被662网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

参考资料

正文内容

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

父组件结构

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中的父组件数据传递至子组件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关教程

  • vue2.0组件之间传值、通信的方式总结

    这篇文章主要介绍了vue2.0组件之间传值、通信的多种方式以及注意要点,需要的朋友可以参考下

    发布时间:2020-01-06

  • 如何将自己的vue组件发布到npm

    本篇文章主要介绍了自定义vue组件发布到npm的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-03-12

  • Vuejs 2.0 子组件访问/调用父组件示例代码

    这篇文章主要介绍了Vuejs 2.0 子组件访问/调用父组件的方法(示例代码),需要的朋友可以参考下

    发布时间:2020-01-28

  • 实例分享vue中子组件如何向父组件传递数据

    这篇文章主要介绍了vue中子组件向父组件传递数据的实例代码(实现加减功能) ,需要的朋友可以参考下

    发布时间:2020-03-05

  • 如何用vue组件实现用户无限添加自定义填写表单

    今天小编就为大家分享一篇vue组件开发之用户无限添加自定义填写表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    发布时间:2020-02-16

  • Vue.js前端开发:快速入门与专业应用

    Vue.js前端开发:快速入门与专业应用

    本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

    大小:3.6KB MB前端开发电子书

  • Vue企业开发实战

    Vue企业开发实战

    本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

    大小:109.6 MBVue.js实战电子书

  • 水晶石技法VUE 10完全学习手册

    水晶石技法VUE 10完全学习手册

    《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见

    大小:114191 MB VUE10学习手册

  • Node.js实战:使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用

    Node.js实战:使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用

    大小:227 MBNode.js电子书

  • Vue.js项目开发实战

    Vue.js项目开发实战

    大小:186.6 MBVue.js电子书

  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。

    大小:26581 MB MVue.js入门

  • Vue.js v2.x 官方教程

    Vue.js v2.x 官方教程

    Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 易用 会HTML、CSS、JavaScript就可以构建应用。 灵活 可以在一个库和一套完整框架之间自如伸缩。 高效 20kB运行大小,超快虚拟 DOM,最省心的优化 目录 基础 深入了

    大小:5.11 MBVue手册

  • Vue.js实战

    Vue.js实战

    尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

    大小:196.7 MBVue电子书

  • Spring Boot+Vue全栈开发实战

    Spring Boot+Vue全栈开发实战

    传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序

    大小:196.3 MBSpring电子书

  • Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

    Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

    本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

    大小:132979 MB 项目实战

用户留言