父子组件通信:

  子组件

<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: });
}
} }
</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('');
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 组件通信传值的更多相关文章

  1. vue组件通信传值——Vuex

    一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...

  2. Vue 组件间传值

    前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...

  3. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  4. 【Vue组件通信】props、$ref、$emit,组件传值

    1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...

  5. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  6. vue组件通信新姿势

    在vue项目实际开发中我们经常会使用props和emit来进行子父组件的传值通信,父组件向子组件传递数据是通过prop传递的, 子组件传递数据给父组件是通过$emit触发事件来做到的.例如: Vue. ...

  7. vue组件通信全面总结

    写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...

  8. vue 组件通信

    组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...

  9. Vue组件间传值 v-model

    使用过Vue的同学应该都了解组件之间传值 父组件 --> 子组件 : props 子组件 --> 父组件 : 事件 其实有一种更为简单的方法,是基于上述两种方法,那就是 v-model 我 ...

随机推荐

  1. MSP430 PIN 操作寄存器

    1.P口端口寄存器: (1).PxDIR   输入/输出方向寄存器 (0:输入模式    1:输出模式) (2).PxIN    输入寄存器 输入寄存器是只读寄存器,用户不能对其写入,只能通过读取该寄 ...

  2. 如何在vue项目中引入阿里巴巴的iconfont图库

    1. 打开 http://www.iconfont.cn/ 2. 选择我们喜欢的图标,点击上面的小车,加入图标库,即右侧的购物车 3.点击购物车,点击下载代码 4.解压下载的文件夹,将文件夹复制到 a ...

  3. jeecg中列表查询数据关联其他表的显示

    1.A表字段:id,name;B表字段:id,name,fid(A表外键),现查询A表和B表的所有数据并且查询条件A,B都有,在前台页面list显示 2.后台方法: @RequestMapping(p ...

  4. $tsinsenA1067$

    \(problem\) 这种题目需要一个定理 \(a[1]+a[2]+a[3]+a[4]...=(a[1]%mod)+...\) 本人出奇的懒 然后 动态规划?(恰似枚举) #include < ...

  5. 【Vijos1083/BZOJ1756】小白逛公园(线段树)

    [写在前面]TYC (Little White) 真是太巨啦! 题目: Vijos1083 分析: 一眼看上去就是线段树啊-- 然而当我这种蒟蒻兴高采烈地把线段树模板敲了一半,却发现一个问题: 这子区 ...

  6. B-Tree 漫谈 (从二叉树到二叉搜索树到平衡树到红黑树到B树到B+树到B*树)

    关于B树的学习还是需要做点笔记. B树是为磁盘或者其他直接存取辅助存储设备而设计的一种平衡查找树.B树与红黑树的不同在于,B树可以有很多子女,从几个到几千个.比如一个分支因子为1001,高度为2的B树 ...

  7. 正则表达式 \D 元字符

    \D元字符可以匹配非数字字符,等价于"[^0-9]". 语法结构: (1).构造函数方式: new RegExp("\\D") (2).对象直接量方式: /\D ...

  8. 1B课程笔记分享_StudyJams_2017

    课程1B 概述 课程1B主要讲解了Android UI的ViewGroups(视图组).LinearLayout(线性布局).RelativeLayout(相对布局),Portrait Mode(竖屏 ...

  9. [Android]异常7-Error:Configuration with name 'default' not found.

    背景:使用SVN更新代码,运行出现 异常原因: 可能一>缺少Modules 解决办法有: 解决一>Android Studio切换为Project,settings.gradle中引用和现 ...

  10. 利用php生成验证码

    <?php /** * php生成验证码 * @param $width 画布宽 * @param $height 画布高 * @param $vcodelen 验证码长度 * @param $ ...