父子组件通信:

  子组件

<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. 为何Google这类巨头会认为敏捷开发原则是废话?

    [编者按]这是一个来自Quora的问题.Rocket程序员Jasmine Adamson在文中表达了敏捷开发原则是废话的观点,他觉得现实生活中没有什么人会推崇这些原则来工作,不过他们仍然在说其所做的是 ...

  2. Linux基础命令第二波

    第1章 Linux启动过程 开机自检(BIOS)##硬件检查 MBR引导 GRUB菜单(选择不同的内核) 加载内核 运行init进程(Linux系统里面第一个进程) 读取/etc/inittab配置文 ...

  3. 解决UTF-8方法归纳

    1:通过spring配置过滤器解决 <!-- 配置Spring提供的字符编码过滤器 --> <filter> <filter-name>SpringCharacte ...

  4. pcntl研究

    虽说php用于并发计算有点山寨,但总比没有强把.(有问题请指正) 下面是pcntl多线程的例子.(只能用于cli模式,而且只能用于linux环境) <?php $starttime=microt ...

  5. [App Store Connect帮助]三、管理 App 和版本(3)查找 App

    在“我的 App”中,使用工具栏控件快速查找 App. 搜索 App: 在搜索栏中输入文本. 您可以输入 App 的名称.Apple ID(App 标识符).套装 ID,或 SKU.套装 ID 和 S ...

  6. Akka源码分析-local-DeathWatch

    生命周期监控,也就是死亡监控,是akka编程中常用的机制.比如我们有了某个actor的ActorRef之后,希望在该actor死亡之后收到响应的消息,此时我们就可以使用watch函数达到这一目的. c ...

  7. vue工程npm run serve/start/dev启动时,node_modules文件报:Cannot read property 'range' of null 错误

    改问题是"babel-eslint"版本更新问题导致的: 给大家一个最简单粗暴的解决方案: 在项目里找到对应的工程:直接删除里面的node_modules文件夹,然后重新npm i ...

  8. c/c++ 参数传递 - 数组

    对于函数参数中的数组类型:传递的是数组地址,可以理解成传递的是对数组的引用.不是值传递,这是由C/C++函数实现机制决定的.一下三种函数生命完全等价: void func(int array[10]) ...

  9. Java系列学习(十二)-开始Eclipse

    1.用Eclipse来写一个HelloWorld (1)选择工作空间 工作空间其实就是我们写的源代码所在的目录 (2)创建一个Java项目 [File-New-Java Project] (3)创建包 ...

  10. JS高级——instanceof语法

    基本语法 对象 instanceof 构造函数 基本使用 <script> function Person() { } //p--->Person.prototype--->O ...