码迷,mamicode.com
首页 > 其他好文 > 详细

vue学习之父子组件通信两种方法

时间:2018-09-10 18:02:44      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:使用   bsp   template   注册   两种方法   传值   alt   不可   组件   

初学vue,最常用及实用的就是父子组件之间的通信了,在此记录一点自己的学习过程

方法一:props及$emit

父组件中先引入子组件,然后components里面注册组件,然后template里调用,调用的时候通过v-bind传递值给子组件,v-on监听子组件$emit传递过来的值

技术分享图片

子组件中先用props接收父组件的传值,注意子组件中不可直接修改父组件的传值,可通过watch监听来赋值,通过$emit来传递值给父组件

技术分享图片

 

方法二:ref

父组件传值props方法不变,父组件可通过使用ref来调用子组件的方法获取返回值

技术分享图片

技术分享图片

子组件中需在methods中返回值

技术分享图片

 

vue学习之父子组件通信两种方法

标签:使用   bsp   template   注册   两种方法   传值   alt   不可   组件   

原文地址:https://www.cnblogs.com/nmgxl-home/p/9621091.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!