Vue父子组件通信

1.父传子,子组件通过props接收

father

<template>
  <children :msg="msg"></children>
</template>
<script>
import children from "./children.vue";
export default {
  components: {children},
  data() {
    return {
      msg: "传给子组件的消息",
    };
  },
};
</script> 

child

<template>
   <div>{{msg}}</div>
</template>
<script> 
export default {
    name:'children',    
    props:['msg']
}
</script> 

2.子传父,子组件通过$emit触发父组件上的自定义事件

father

<template>
  <children :msg="msg" @change='change'></children>
</template>
<script>
import children from "./children.vue";
export default {
  components: {children},
  data() {
    return {
      msg: "传给子组件的消息",
    }
  },
  methods:{
      change(val){
          this.msg=val
      }
  }
};
</script>

child

<template>
    <div>
        <p>{{msg}}</p>
        <button @click="change">改变父组件传递过来的值</button>
    </div>
</template>
<script> 
export default {
    name:'children',    
    props:['msg'],
    methods:{
        change(){
            this.$emit('change',"子改父")
        }
    }
}
</script>

3.eventBus

event.js

import Vue from "vue";
export const eventBus=new Vue()

father

<template>
  <children :msg="msg"></children>
</template>
<script>
import children from "./children.vue";
import {eventBus} from './event'
export default {
  components: { children },
  data() {
    return {
      msg: "传给子组件的消息",
    };
  },
  mounted() {
    eventBus.$on("msg", (msg)=>{
      this.msg=msg
    });
  },
};
</script>

child

<template>
    <div>
        <p>{{msg}}</p>
        <button @click="change">父子组件同步</button>
    </div>
</template>
<script> 
import {eventBus} from './event'
export default {
    name:'children',    
    props:['msg'],  
    methods:{
        change(){
            eventBus.$emit('msg','子组件改变')
        }
    }
}
</script>

4.sync与计算属性结合

father

<template>
  <children :msg.sync="msg"></children>
</template>
<script>
import children from "./children.vue";
export default {
  components: {children},
  data() {
    return {
      msg: "传给子组件的消息",
    }
  }
};
</script>

child

<template>
    <div>
        <p>{{childMsg}}</p>
        <button @click="change">父子组件同步</button>
    </div>
</template>
<script> 
export default {
    name:'children',    
    props:['msg'], 
    computed:{
        childMsg:{
            get(){
                return  this.msg
            },
            set(val){
                this.$emit('update:msg',val)
            }
        }
    },
    methods:{
        change(){
            this.childMsg='我是子组件'
        }
    }
}
</script>