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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
js运动应用实例解析
Dec 28 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
js实现带箭头的进度流程
Mar 26 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python的randrange()方法使用教程
2015/05/15 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Python中按键来获取指定的值
2019/03/02 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
函授自我鉴定
2013/11/06 职场文书
建筑工地质量标语
2014/06/12 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书