vue2.X父子组件传值

一直听朋友说vue组件化简单好用,今天搞了一下组件之间的传值,看了好多教程终于鼓捣出来了,分享一下踩的坑。

子传父主要通过events,父传子主要通过props,这里借用一张图片,表达。


基于vue-cli 

子组件向父组件传值

子组件

定义点击事件setVa 点击之后往父组件传“管理员列表”,用this.$emit(要触发的事件,这个可以自定义,要传给父组件的值)这个方法,

子组件需要某种事件比如change事件这样的一个方法来触发自定义事件

父组件


在父组件里引入子组件,然后在子组件标签上绑定子组件页面里面自定义的事件,在methods里写一个事件响应的函数就可以了。


父组件向子组件传值

子组件

    props里面title就是父组件传进来的

父组件


引入子组件,然后在子组件标签上写:title(因为我是动态引入的所以加:,如果不是则不用)后边跟你要传的值


总结

    无论是子传父还是父传子,她们都需要一个中间的介质,子传父介质是自定义事件,父传子是props,记住这两点就可以实现基本的组件传值了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,286评论 19 139
  • 推荐我的vue教程:VUE系列教程目录 上篇讲解了vue-router路由入门,现在讲讲关于vue组件的内容。如果...
    侬姝沁儿阅读 2,373评论 6 20
  • Vue.js是一套构建用户界面的渐进式框架。本文将介绍一些重要入门的知识点,比如:运行环境的搭建、定义组件的方式、...
    浪里行舟阅读 1,310评论 1 15
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,159评论 4 129
  • 我一直以为我是个英雄,但…… 记忆就是片段,或者只剩下片段 小时候第一个印象,是穿着娘个做的衣裳,四个兜的,右下那...
    真沾老刘阅读 269评论 0 0