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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
微信小程序ibeacon三点定位详解
Oct 31 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 变量定义和变量替换的方法
2009/07/30 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
取得传值的函数
2006/10/27 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
原生JS轮播图插件
2017/02/09 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
Python中if elif else及缩进的使用简述
2018/05/31 Python
python读取各种文件数据方法解析
2018/12/29 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
园艺师求职信
2014/04/27 职场文书
应届毕业生求职信
2014/05/26 职场文书
社区戒毒工作方案
2014/06/04 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
活动经费申请报告
2015/05/15 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL