Vue的组件通信(父传子、子传父、兄弟组件通信)

Vue的组件通信：①父传子、②子传父、③兄弟组件通信

---

①父传子

父组件传到子组件数据是单向流动的,(子组件中修改props数据,是无效的，会有个红色的警告，如果确实需要修改,可以用计算属性,或者把数据赋值给子组件data里的一个变量);

在父组件中给子组件标签绑定一个属性，属性上挂载需要传输的变量，在子组件通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用props:['属性名']、props:{属性名:数据类型};

(1) 父组件parent.vue代码是：

 <template>
   <div class="parent">
     <h2>{
  { msg }}</h2>
     <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>