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实现计算加载页面所用的时间
Apr 02 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
JavaScript 原型继承
Dec 26 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
js实现简单锁屏功能实例
May 27 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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读取MySQL数据代码
2008/06/05 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
javascript调试说明
2010/06/07 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
基于python指定包的安装路径方法
2018/10/27 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
户籍证明模板
2014/09/28 职场文书
开平碉楼导游词
2015/02/06 职场文书
2015年司机工作总结
2015/04/23 职场文书
八年级历史教学反思
2016/02/19 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python