vue 父子组件通信-日常开发必备

父组件向子组件传值

网上已经有很多类似的教程,但是写得太啰嗦,本文用最直观的方式表达,即看即用,适合对前端不了解的人,又想马上上手的同学。

方法使用props

例子:

父组件内容:

定义edit组件之后,引入子组件 通过 :editid="editId" 传值

子组件内容:


子组件定义props接收父组件传过来的值

父组件调用子组件方法

首先:

父组件定义ref

然后

通过定义的ref 直接调用子组件方法

子组件内容:


子组件必须定义了这个方法,不然会报错



子组件向父组件通信

子组件内容

vm就是当前vue实例,使用$emit传两个参数,第一个是父组件的响应方法,第二个是向父组件传的参数


父组件:

<tables  ref="tables" editable :loading="loading" v-model="tableData" :columns="columns" @update="eidtAction"/>

父组件定义了update方法 响应子组件调用的方法,使用父组件定义的eidtAction方法处理相关业务


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

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,677评论 1 33
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 10,925评论 0 32
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 13,159评论 0 13
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,646评论 0 6
  • 人在暗恋时,就好像地表下冬眠了一冬的小虫子,抓心挠肝的蠕动着想出来拥抱春天。 这是暗恋的表现,也是“蠢”字的本义。
    4baaaf353d22阅读 1,033评论 0 0