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 相关文章推荐
页面使用密码保护代码
Apr 10 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python读取几个G的csv文件方法
2019/01/07 Python
基于Python解密仿射密码
2019/10/21 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
兼职学生的自我评价
2013/11/24 职场文书
广告业务员岗位职责
2014/02/06 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书