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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
javascript 写类方式之四
Jul 05 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
微信小程序实现选项卡滑动切换
Oct 22 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功能函数
2015/04/15 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP引用返回用法示例
2016/05/28 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
JQuery 常用操作代码
2010/03/14 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
如何利用python发送邮件
2020/09/26 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
linux下进程间通信的方式
2013/01/23 面试题
求职信写作要突出重点
2014/01/01 职场文书
法人授权委托书范本
2014/04/04 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电