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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
如何使用动态共享对象的模式来安装PHP
2006/10/09 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
面包屑导航详解
2017/12/07 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python3爬取torrent种子链接实例
2020/01/16 Python
pandas按条件筛选数据的实现
2021/02/20 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
艺术应用与设计个人的自我评价
2013/11/23 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
优乐美广告词
2014/03/14 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
辅导员学期工作总结
2015/08/14 职场文书
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js