vue兄弟组件传递数据的实例

在main.js里面设置data{eventHub:new Vue() } 

new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App },
 data:{
  eventHub:new Vue() // 在main.js设置所有组件都能用调用
 },

})

我们再组件一设置一个事件调用组件二的事件，传递数据给组件二

<template>
 <div v-on:click="on()"></div>

</template>
<script>
export default {
 data(){
 return{
 datas:"数据"
}
},
 methods:{
 on(){
  this.$root.eventHunb.$emit("eventName",this.datas) 

 //$emit是触发事件，当我们点击on事件的时候，$emit会触发其他组件的eventName事件， 把this.datas数据传递到其他组件中
 }
 }

}

</scrpt>

组件二被触发的事件，接受的参数

<template>
<div>{{datas}}</div>
</template>
<script>
exports default{
data(){
return{
datas:""
}
},
created(){
//组件一跟组件二都要绑定相同的eventName
this.$root.eventHub.$on("eventName",(tar) = > {

this.fn(tar)
//$on是监听事件，如果组件一得$emit触发了，$on就会触发this.fn事件

})
}
methods:{
fn:function(tar){
this.datas = tar
}
}

}
</script>

以上这篇vue兄弟组件传递数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue组件之单向数据流的解决方法

    子组件能够通过自身的props选项获取父组件上的数据,但是在默认情况下,props是单向绑定的---当父组件数据(属性)发生变化的时候会传递给子组件,引起子组件的变化,但不能反过来并且不允许子组件直接改变父组件的数据,会报错的.例如: 也就是说当通过一种方法改变父组件数据的时候,子组件与之相关联的props数据也会发生改变,从而影响子组件,但是子组件直接改变从父组件拿过来的props数据却不能影响父组件的原始数据.也就是说一般情况下只能是"父影响子,而不是子影响父". 两种情况: 1.

  • vue组件数据传递、父子组件数据获取，slot,router路由功能示例

    vue组件数据传递、父子组件数据获取，slot,router路由功能示例

    本文实例讲述了vue组件数据传递.父子组件数据获取,slot,router路由功能.分享给大家供大家参考,具体如下: 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https:/

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • vue组件之间数据传递的方法实例分析

    vue组件之间数据传递的方法实例分析

    本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

  • Vue 父子组件的数据传递、修改和更新方法

    父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c

  • Vue表单类的父子组件数据传递示例

    使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明. 与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同. 1.传递基本类型数据 当子

  • vuejs父子组件之间数据交互详解

    父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit自定义事件 export default { name: 'comment', props: ['issue','index'], data () { return { comment: '', } }, components: {}, methods: { removeComment: funct

  • vue-router：嵌套路由的使用方法

    vue-router：嵌套路由的使用方法

    模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

  • vue2.0父子组件间传递数据的方法

    关于父子组件之间传递数据其实文档上都说得很明白. 但是如果完全不懂的人做计也看不懂,下面是一个小例子,有两个文件 1.parent.vue <template> <child :child-msg="msg" @ok="event"></child> </template> <script> import child from './child.vue'; export default { data(){

  • Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    当我们在书写 vue 组件的时候,也许可能会用到数据传递:将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件: 每当我们遇到这样的需求的时候,我们总是会想到有三种解决办法: 通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex 非父子组件的通信传递 Vue Event Bus ,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递. 后来再逛社区的时候我又发现了还有第四种传递方式, inheritAttrs +

  • vue父子组件的数据传递示例

    vue父子组件的数据传递示例

    1.父组件向子组件传递数据 <div id="box"> <aaa></aaa> </div> <template id="aaa"> <h1>模板aaa=>{{msg1}}</h1> //msg1写在这里是可以的,因为这是父组件内部 //<bbb>{{msg1}}</bbb> //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数 //据,需

随机推荐