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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
七个很有意思的PHP函数
May 12 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
ES6的新特性概览
Mar 10 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
ES5新增数组的实现方法
May 12 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP strripos函数用法总结
2019/02/11 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
js实现登录验证码
2016/12/22 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
物业管理专业求职信
2014/06/11 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
军人离婚协议书样本
2014/10/21 职场文书
北京导游词
2015/02/12 职场文书
团日活动总结格式
2015/05/11 职场文书
行政答辩状范文
2015/05/21 职场文书
村官2015年度工作总结
2015/10/14 职场文书
《搭石》教学反思
2016/02/18 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python