vue实现父子组件之间的通信以及兄弟组件的通信功能示例


Posted in Javascript onJanuary 29, 2019

本文实例讲述了vue实现父子组件之间的通信以及兄弟组件的通信功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue父子组件通信、兄弟组件通信</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    table{
      text-align: center;
      margin:0 auto;
    }
    div{
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="app">
    <table border="1" cellpadding="0" cellspacing="0">
      <tr><td colspan="3">父组件数据</td></tr>
      <tr><td>name</td><td>{{name}}{{ff()}}</td><td><input type="text" v-model="name"></td></tr>
      <tr><td>age</td><td>{{age}}{{ff()}}</td><td><input type="text" v-model="age"></td></tr>
    </table>
    <v-son :son-name="name" :son-age="age" @sza="gg"></v-son>
  </div>
  <template id="son">
    <div>
      <button @click="sonChange">子组件按钮</button>
      <table border="1" cellpadding="0" cellspacing="0">
        <tr><td colspan="3">子组件数据</td></tr>
        <tr><td>name</td><td>{{sonName}}</td><td><input type="text" v-model="sonName"></td></tr>
        <tr><td>age</td><td>{{sonAge}}</td><td><input type="text" v-model="sonAge"></td></tr>
      </table>
      <g-son :g-name="sonName" :g-age="sonAge"></g-son>
    </div>
  </template>
  <template id="vgson">
    <div>
      <button @click="gchan">孙子组件按钮</button>
      <table border="1" cellpadding="0" cellspacing="0">
        <tr><td colspan="3">孙子组件数据</td></tr>
        <tr><td>name</td><td>{{gName}}</td><td><input type="text" v-model="gName"></td></tr>
        <tr><td>age</td><td>{{gAge}}</td><td><input type="text" v-model="gAge"></td></tr>
      </table>
    </div>
  </template>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
  var bus=new Vue();
const app=new Vue({
  el:"#app",
  data:{
    name:"keep",
    age:"28"
  },
  methods:{
   gg(val1,val2){
     this.name=val1
     this.age=val2
   },
    ff(){
      bus.$on("suibian", (val1,val2)=> {
        this.name=val1;
        this.age=val2
      })
    }
  },
  components:{
    "vSon":{
      template:"#son",
      methods:{
       sonChange(){
         this.$emit("sza",this.sonName,this.sonAge)
       }
      },
      props:["sonName","sonAge"],
      components:{
        "gSon":{
          template:"#vgson",
          props:["gName","gAge"],
          methods:{
            gchan(){
              bus.$emit("suibian",this.gName,this.gAge);
            },
        }
        }
      },
    }
  }
})
</script>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

vue实现父子组件之间的通信以及兄弟组件的通信功能示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
再探JavaScript作用域
Sep 24 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
新手简单了解vue
May 29 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
vue实现的下拉框功能示例
Jan 29 #Javascript
angular4中引入echarts的方法示例
Jan 29 #Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 #Javascript
微信小程序实现页面浮动导航
Jan 28 #Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 #Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 #Javascript
微信小程序实现顶部导航特效
Jan 28 #Javascript
You might like
php单件模式结合命令链模式使用说明
2008/09/07 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
js Function类型
2011/12/04 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
js消除图片小游戏代码
2019/12/11 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
详解python的super()的作用和原理
2020/10/29 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
财务部总监岗位职责
2014/03/12 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
高一军训口号
2015/12/25 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python