欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-15 10:48:23
...

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当作一个中转站

 

 

 

相关标签: vue 组件通信