vue 实现组件之间通信的三种方式

vue的组件传值分为三种方式：父传子、子传父、非父子组件传值

父子组件的关系可以总结为 prop 向下传递，事件向上传递

父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

下面我们就开始用代码详细的介绍vue组件传值的三种方式

1、父传子

子组件的代码：

<template>
    <div id="container">
        {
   {
   msg}}
    </div>
</template>
<script>
export default {
   
  data() {
   
    return {
   };
  },
  props:{
   
    msg: String
  }
};
</script>
<style scoped>
#container{
   
    color: red;
    margin-top: 50px;
}
</style>

<