vue 父子组件传参

引用组件时,首先import引入,再注册,最后方可使用。同时注意,如果是驼峰式helloWorld ,在调用时就要转换成 hello-world才能使用。

组件之间的数据交换:

1)父组件向子组件传数据时,可以在父组件的HTML标签添加属性,然后子组件中使用props注册(注意props:['xxx']加引号)后,即可在子组件中使用来自父组件的数据

Paste_Image.png

可以使用v-on绑定自定义事件名,用于子模板向父模板传递数据

父模板:

child-tell-me-something是父组件绑定的自定义事件

Paste_Image.png

子模板:

子组件通过$emit('事件名', 传给处理程序的参数)来发布事件,这样父组件监听相应事件的处理程序就可以获取子组件的信息(即,实现子组件向父组件传递信息)。

Paste_Image.png

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 3,865评论 5 14
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,097评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29
  • 序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开...
    一缕殇流化隐半边冰霜阅读 11,263评论 19 92