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

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

扫描二维码关注公众号，回复： 2337176 查看本文章