父子组件通信:

  子组件

<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. Ubuntu 16.04 安装CodeBlocks

    首先将软件源添加进来,就是运行以下命令 sudo add-apt-repository ppa:damien-moore/codeblocks-stable sudo apt-get update 完 ...

  2. 2017iOS开发最新的打包测试步骤(亲测)

    最近也是忙着修改项目,今天把最近遇到的问题和知识给大家分享一下. 有时候我们需要将我们的项目发给测试组进行bug测试,这时候我们就需要把自己的项目打包,生成一个二维码或者链接的形式,给测试组,接下来就 ...

  3. JSP-Runoob:JSP XML 处理数据

    ylbtech-JSP-Runoob:JSP XML 处理数据 1.返回顶部 1. JSP XML 数据处理 当通过HTTP发送XML数据时,就有必要使用JSP来处理传入和流出的XML文档了,比如RS ...

  4. akka设计模式系列-Chain模式

    链式调用在很多框架和系统中经常存在,算不得上是我自己总结的设计模式,此处只是简单介绍在Akka中的两种实现方式.我在这边博客中简化了链式调用的场景,简化后也更符合Akka的设计哲学. trait Ch ...

  5. git配置用户信息

    git配置用户信息 一.在本地配置用户信息 配置内容:user.name 和 user.email 配置目的:Git用来记录谁做了什么事 配置方法:windows下打开Git Bash进行操作  gi ...

  6. 来自一个用户的体验-Alpha项目测试

    软件梦之队成员:201731062305 周蓉 这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 <软件梦之队>(附上团队博客 ...

  7. 04--Spring知识汇总

    1. @Autowried注解 Spring 2.5 引入了 @Autowired 注释,它可以对类成员变量.方法及构造函数进行标注,完成自动装配的工作. 通过 @Autowired的使用来消除 se ...

  8. CSS——background综合运用

    搜索栏图标: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  9. dotnetnuke 头像调用 头像缩放

    public static string GetProfileImage(int userId, int width, int height)        {                     ...

  10. async await 同步方法调用异步方法死锁

    同步方法调用异步方法.GetAwaiter().GetResult()计算函数超时,异步方法所有的回调操作都会期望返回到主线程. 所以会导致各种线程死锁.异步方法中使用ConfigureAwait(f ...