父子组件通信:

  子组件

<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. [SDOI 2009] 晨跑

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1877 [算法] 不难看出,第一问要求的是最大流,第二问求的是最小费用最大流 注意建图 ...

  2. SQL service 自动解决依赖包 验证

    依赖关系解决 ============================================================================================= ...

  3. AJAX异步实现

    AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. <head> <meta charset="utf-8"> & ...

  4. VUE移动端禁止双手放大缩小

    //index.html <meta name="viewport" content="width=device-width,initial-scale=1.0,u ...

  5. JavaScript--Array 数组对象

    Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定义了一个空数组: v ...

  6. openpyxl python操作Excel表格,

    这里openpyxl只支持xlsx格式的Excel,openpyxl使用起来会更方便一些,所以如果只操作小流水线文件的话,那么可以优先选择openpyxl,如果要兼容xls的话,就使用xlrd/xlw ...

  7. linux命令(006) -- w

    w命令用于显示已经登陆系统的用户列表,并显示用户正在执行的指令.执行这个命令可得知目前登入系统的用户有那些人,以及他们正在执行的程序.单独执行w命令会显示所有的用户,您也可指定用户名称,仅显示某位用户 ...

  8. jdk11安装没有jre文件夹

    原因:jdk11安装之后是没有jre的 如果需要jre,需要到jdk目录下面去    打开命令窗口,然后执行如下命令:    bin\jlink.exe --module-path jmods --a ...

  9. Android:用签名打包后微信分享失效

    刚开始使用微信分享,申请的微信appid也可以在直接使用,分享成功! 当我使用自己的签名打包分享时却分享失败,一闪而过,好郁闷的说,为什么之前没有打包就可以,签名打包后就不可以了... 开始查找各种资 ...

  10. CSS——padding

    padding是盒子内容与边框的距离. padding:10px;/*上下左右都是10px*/ padding:10px 20px;/*上下是10px 左右是20px*/ padding:10px 2 ...