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 相关文章推荐
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
php动态绑定变量的用法
2015/06/16 PHP
简单实现PHP留言板功能
2016/12/21 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python基于socket实现网络广播的方法
2015/04/29 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
对python Tkinter Text的用法详解
2018/10/11 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
python 变量初始化空列表的例子
2019/11/28 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
护理目标管理责任书
2014/07/25 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书