Vue组件通信--父子通信

首先是父组件向子组件传递消息，组件就类似于我们自己定义的标签一样想要父组件给子组件传递消息，我们可以通过在子组件中定义props（类似于自定义的属性）

在子组件中自定义该组件的属性。

export default {
props:[
    "msg"
]
}

在父组件中通过对属性的动态赋值来对子组件进行传参

<div class="father">
    这是父组件
    <son-vue :msg="msg"></son-vue>
  </div>

data(){
    return {
        msg:"这是父组件的消息"
    }
}

子组件给父组件传递消息，通过给子组件定义一个事件让子组件自己内部在需要传递消息的时候进行触发，这样父组件就可以通过这个事件来拿到消息了

下面定义需要发送消息的时机

<div class="son">
    这是子组件{{msg}}
    <button @click="change"></button>
  </div>

methods:{
    change(){
        this.$emit("change","修改")
    }
}

父组件通过触发事件的函数拿到子组件传来的消息

<div class="father">

    这是父组件

    <son-vue :msg="msg" @change="change"></son-vue>

  </div>

methods:{
    change(msg){
        this.msg = msg
    }
}