vue组件通信传值操作示例


Posted in Javascript onJanuary 08, 2019

本文实例讲述了vue组件通信传值操作。分享给大家供大家参考,具体如下:

父子组件通信:

子组件

<template>
 <div>
  <h3 @click="alerrt"> 我是子组件一</h3>
  <span>{{parentMessage}}</span>
 </div>
</template>
<script>
 export default{
  props: ['parentMessage'],
  mounted() {
   // this.$emit('childEvent');
  },
  methods:{
   alerrt(){
    this.$emit('childEvent',{name:'zhangsan',age:10 });
   }
  }
 }
</script>
<style scoped>
</style>

父组件

<template>
 <div>
  <h2>父组件</h2>
  <span>父组件传递消息给子组件</span>
  <br>
  <router-view @childEvent="parentMethod" :parentMessage="parentMessage" />
  <!-- <Child-one :parentMessage="parentMessage"></Child-one> -->
  <button type="" @click='extendTest'>extend</button>
  <div id="extend"></div>
 </div>
</template>
<script>
 import ChildOne from './ChildOne'
 export default{
  components: {
   ChildOne
  },
  methods: {
   parentMethod({name,age}) {
    alert(this.parentMessage);
    console.log(this.parentMessage,name,age);
   },
   extendTest() {
    console.log('333');
    var Extend = Vue.extend({
     template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
     data: function () {
      return {
       firstName: 'Walter',
       lastName: 'White',
       alias: 'Heisenberg'
      }
     }
    })
    new Extend().$mount('#extend')
   },
  },
  data () {
   return {
    parentMessage: '我是来自父组件的消息aaaa'
   }
  }
 }
</script>
<style scoped>
</style>

兄弟组件通信:

在main,js里加

import Vue from 'vue'
window.eventBus = new Vue();

在组件里

兄弟1组件:

window.eventBus.$emit('函数名称', {参数 键:值});

兄弟2组件:

window.eventBus.$on('grouprecording',参数 =>{
//处理数据
})

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
Vue实现滑动拼图验证码功能
Sep 15 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 #Javascript
vuejs简单验证码功能完整示例
Jan 08 #Javascript
详解React中合并单元格的正确写法
Jan 08 #Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 #Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 #jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 #Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 #Javascript
You might like
php下批量挂马和批量清马代码
2011/02/27 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
flexigrid 参数说明
2010/11/23 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
详解React 元素渲染
2020/07/07 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
python妹子图简单爬虫实例
2015/07/07 Python
Python基于select实现的socket服务器
2016/04/13 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
jupyter notebook清除输出方式
2020/04/10 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
学生打架检讨书大全
2014/01/23 职场文书
庆八一活动方案
2014/01/25 职场文书
医院义诊活动总结
2014/07/04 职场文书
2014年收银工作总结
2014/11/13 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书