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的星级评分插件
Aug 12 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python目录和文件处理总结详解
2019/09/02 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
活动志愿者自荐信
2014/01/27 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
会议邀请函
2015/01/30 职场文书
三下乡个人总结
2015/03/04 职场文书
python实现高效的遗传算法
2021/04/07 Python
教你怎么用Python操作MySql数据库
2021/05/31 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle