Vue子组件向父组件通信与父组件调用子组件中的方法

子组件向父组件通信

创新互联建站-专业网站定制、快速模板网站建设、高性价比光明网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式光明网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖光明地区。费用合理售后完善,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子组件向父组件通信与父组件调用子组件中的方法

总结

以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


本文标题:Vue子组件向父组件通信与父组件调用子组件中的方法
网站路径:http://scyanting.com/article/gjhigg.html