DDR爱好者之家

Vue子组件向父组件通信与父组件调用子组件中的方法
站长资源 2024/4/26 佚名
78 1538
DDR爱好者之家 Design By 杰米

子组件向父组件通信

子组件的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);,

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

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

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>子向父通信</title> 
  <style> 
    #app { 
      border: 1px solid blue; 
      width: 500px; 
      padding: 20px; 
      margin: auto; 
      border-radius: 8px; 
      background: fuchsia; 
    } 
    #wrapper { 
      border: 1px solid red; 
      width: 400px; 
      padding: 20px; 
      border-radius: 8px; 
      background: yellowgreen; 
      margin-top: 20px; 
    } 
  </style> 
  <script src="/UploadFiles/2021-04-02/vue">


效果图


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


总结


以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米