Vue子组件向父组件通信与父组件调用子组件中的方法-创新互联

子组件向父组件通信

10年积累的网站设计、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先建设网站后付款的网站建设流程，更有抚远免费网站建设让你可以放心的选择与我们合作。

子组件的button按钮绑定点击事件,事件方法名为sendToParent(),

该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);

在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),

而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息

父组件调用子组件中的方法

点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],

useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);

而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,

所以,最终的输出结果为: 子级组件收到父级的内容 父级消息

代码示例（结合上面的分析理解代码）

 
 
 
   
   
   
   
 
 
  
 
     
    
这是父组件
 
    
展示父级接收到的消息:{{msg}}
 
    调用子组件的方法 
      
     
     
  
 
 
 
 
 

分享名称：Vue子组件向父组件通信与父组件调用子组件中的方法-创新互联
文章网址：http://cdkjz.cn/article/dgcjco.html