vue2.0父子组件和非父子组件之间的通信

最新推荐文章于 2025-01-03 21:02:10 发布

原创最新推荐文章于 2025-01-03 21:02:10 发布 · 249 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件通信

vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Vue.js中不同组件间的通信方式，包括父组件向子组件传递数据、子组件触发父组件事件以及非父子组件间通过事件总线进行通信的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、父组件传值给子组件

通过props来实现传递数据

父组件：

<template>
    <div>
        <child message="我是父组件传的值"></child><!-- 如果是变量 :message 切标签用-代替驼峰-->
    </div>
</template>
<script>
    import child from './child'     //引入子组件
    export default {
        components:{
            child
        }
    }
</script>

子组件：

<template>
    <div class="child">
        {{message}}
    </div>
</template>
<script>
    export default {
        //props:['message']
        props:{
            message:{
                type:String,
                default:''
            }
        }
    }
</script>

2、子组件与父组件之间的传值

vue数据的传递只能是单向的，所以不能想父组件传递子组件那样，而是要通过触发事件来通知父组件改变数据，从而达到子组件改变父组件数据的功能

子组件：

<template>
    <div class="child">
        <button @click="changeDate">改变父组件的数据</button>
    </div>
</template>
<script>
    export default {
       methods:{
           changeDate(){
               this.$emit('childClick');
           }
       }
       
    }
</script>

父组件：

<template>
    <div>
        <p>{{message}}</p>
        <child @childClick="change"></child> 
    </div>
</template>
<script>
    import child from './child'   
    export default {
        components:{
            child
        },
        data(){
            return{
                message:"我是数据"
            }
        },
        methods:{
            change(){
                this.message='我被child改变了'
            }
        }
    }
</script>

3、非父子组件之间的通信

非父子组件的通信，通过创建一个新的实例，相当于一个中转站，通过他来传递和接受事件

在src目录下新建一个eventBus.js文件

import Vue from 'vue'

var eventBus = new Vue()

export default eventBus

A组件：

<template>
  <div class="A">
      <button @click="clickA">我是A组件</button>
  </div>
</template>

<script>
  import eventBus from '../eventBus.js'
  export default {
      methods:{
        clickA(){
            eventBus.$emit('change','我是A组件的数据');
        }
      }
  }
</script>

B组件：

<template>
  <div class="B"></div>
</template>

<script>
  import eventBus from '../eventBus.js'
  export default {
      mounted(){
          eventBus.$on('change',val=>{
              console.log(val);  //我是A组件的数据
          })
      }
  }
</script>

这样就实现了非父子组件之间的通信了，原理就是把eventBus当作一个中转站