使用vue怎么实现组件通信传值

使用vue怎么实现组件通信传值？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

父子组件通信：

子组件

<template>  <div>   <h4 @click="alerrt"> 我是子组件一</h4>   <span>{{parentMessage}}</span>  </div> </template> <script>  export default{   props: ['parentMessage'],   mounted() {    // this.$emit('childEvent');   },   methods:{    alerrt(){     this.$emit('childEvent',{name:'zhangsan',age:10 });    }   }  } </script> <style scoped> </style>

父组件

<template>  <div>   <h3>父组件</h3>   <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('333');     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',参数 =>{ //处理数据 })

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。