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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
layui清空,重置表单数据的实例
Sep 12 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
在字符串中把网址改成超级链接
2006/10/09 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Python部署web开发程序的几种方法
2017/05/05 Python
Python文件的读写和异常代码示例
2017/10/31 Python
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
餐厅总经理岗位职责
2013/12/31 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
升学宴学生致辞
2015/09/29 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python