Vue 之孙组件向爷组件通信的实现


Posted in Javascript onApril 23, 2019

如何把孙组件内特定的数据传给爷组件?

例如

把孙组件的名字传给爷组件并在爷组件上显示

思路

  • 在孙组件被点击后 emit 事件 1 和孙组件的名字
  • 在父组件上监听孙组件 emit 出的事件 1,再次 emit 事件 2
  • 在爷组件上监听父组件 emit 出的事件 2,并触发处理函数
  • 这个处理函数将父组件传出的子组件名字显示在父组件上
<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
   child name: {{child}}
   <parent v-on:say2='greeting("child", $event)'></parent>
  </div>
 </body>
 <script>
  Vue.component('parent', {
   template: `
   <div>
    <child v-on:say1='$emit("say2", $event)'></child>
   </div>   `
  })
  Vue.component('child', {
   template: `
    <div>
     child
     <button v-on:click='$emit("say1", "Jack")'>greeting</button>
    </div>
   `
  })
  new Vue({
   el: '#app',
   data: {
    child: '',
   },
   methods: {
    greeting: function (key, value) {
     this[key] = value
    },
   }
  })
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
Jquery 效果使用详解
Nov 23 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
VUE重点问题总结
Mar 19 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
Vue infinite update loop的问题解决
Apr 23 #Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 #Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 #Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 #Javascript
vue项目首屏加载时间优化实战
Apr 23 #Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 #Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 #Javascript
You might like
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
js 目录列举函数
2008/11/06 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Django接收自定义http header过程详解
2019/08/23 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
同学聚会祝酒词
2015/08/10 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏