一.父子通信

• props

父级向子级传递值

//子组件child.vue
<template>
    <div>
        <p>这里是child组件</p>
        <p>infor:{{infor}}</p>
    </div>
</template>
<script>
export default {
    props:{
        infor:{
            type:String,
            default:''
        }
    }
}
</script>
<style>
</style>

//父组件Home.vue
<template>
  <div class="home">
    <p>这里是父组件</p>
    <child :infor="infor" ></child>
  </div>
</template>
<script>
import child from '@/components/child.vue'
export default {
  name: 'Home',
  components: {
    child
  },
  data(){
      return{
          infor:'父级默认信息'
      }
  }
}
</script>

父子通信-props.jpg

• ref

父级通过事件修改子组件属性

//子组件child.vue
<template>
    <div>
        <p>这里是child组件</p>
        <p>{{infor}}</p>
    </div>
</template>
<script>
export default {
  data(){
    return{
      infor:'子组件默认值'
    }
  }
}
</script>
<style>
</style>

<template>
  <div class="home">
    <p>这里是父组件</p>
    <button @click="handleClick">父组件事件</button>
    <child ref="child"></child>
  </div>
</template>
<script>
import child from '@/components/child.vue'
export default {
  name: 'Home',
  components: {
    child
  },
  methods:{
    handleClick:function(){
        this.$refs["child"].infor = '通过父级事件个改变';
    }
  }
}
</script>

父级通过事件修改子组件属性.png

二.子父通信

• $emit

子级通过方法改变父级值

//子组件child.vue
<template>
    <div>
        <p>这里是child组件</p>
        <button @click="btnClick('yes')">yes</button>
        <button @click="btnClick('no')">no</button>
    </div>
</template>
<script>
export default {
    methods:{
        btnClick:function(val){
            if(val == "yes"){
                this.$emit('sayYes','yesInfor')
            }else{
                this.$emit('sayNo','noInfor')
            }
        }
    }
}
</script>
<style>
</style>

//父组件Home.vue
<template>
  <div class="home">
    <p>这里是父组件</p>
    <p>{{val}}</p>
    <child @sayYes='sayYes' @sayNo='sayNo'></child>
  </div>
</template>
<script>
import child from '@/components/child.vue'
export default {
  name: 'Home',
  components: {
    child
  },
  data(){
      return{
          val:'default'
      }
  },
  methods:{
        sayYes:function(val){
            this.val = val
        },
        sayNo:function(val){
            this.val = val
        }
  }
}
</script>

子父通信-$emit.jpg

• .sync

主要用于实现父子组件数据同步

官方:该语法糖会扩展成一个更新父组件绑定值的 v-on 侦听器

个人理解：在父级已经传给子级某个值(如用props的方式)之后，子级再修改这个值并同步到父级时使用。当然用别的方式实现一样的效果，但是这就是一种简写语法糖。

//child3.vue
<template>
    <div>
        <p>子组件3</p> 
        <p>子组件3值:{{val}}</p>
        <button @click="change">change</button>
    </div>
</template>
<script>
export default {
    props:{
        val:{
            type:Number
        }
    },
    methods:{
        change(){
            this.$emit('update:val',1)
        }
    }
}
</script>
<style>
</style>

<template>
    <div>
        <div>父组件2</div>
        <div>
            父组件2值:{{val}}
        </div>
        <child3 :val.sync="val"></child3>
    </div>
</template>
<script>
import child3 from '@/components/child3.vue'
export default {
    components:{
        child3
    },
    data(){
        return{
            val:0
        }
    }
}
</script>
<style>
</style>

.sync

三.兄弟通信

• Eventbus

1.首先写一个事件总线bus

//bus.js
import Vue from 'vue'
export default new Vue()

2.在兄弟组件child.vue中引入bus.js并发送事件

//child.vue
<template>
    <div>
        <p>这里是child组件</p>
        <div>
            <button @click="btnClick('yes')">child2yes</button>
            <button @click="btnClick('no')">child2no</button>
        </div>
    </div>
</template>
<script>
import bus from './bus'
export default {
    methods:{
        btnClick:function(val){
            if(val == "yes"){
                bus.$emit('sayYes2','yesInfor')
            }else{
                bus.$emit('sayNo2','noInfor')
            }
        }
    }
}
</script>
<style>
</style>

3.在兄弟组件child2.vue中引入bus.js并在mounted接收事件

//child2.vue
<template>
    <div>
        <p>这里是child2组件</p>
        fromChild:{{val}}
    </div>
</template>
<script>
import bus from './bus'
export default {
    data(){
        return{
            val:'child2default'
        }
    },
    mounted(){
        bus.$on('sayYes2',val =>{
            this.val = val;
        });
        bus.$on('sayNo2',val =>{
            this.val = val;
        })
    }
}
</script>
<style>
</style>

4.在父组件Home.vue中引入着两个子组件

//Home.vue
<template>
  <div class="home">
    <p>这里是父组件</p>
    <child></child>
    <child2></child2>
  </div>
</template>

<script>
import child from '@/components/child.vue'
import child2 from '@/components/child2.vue'

export default {
  name: 'Home',
  components: {
    child,
    child2
  }
}
</script>

Eventbus.jpg