vue2 父传子、子传父、兄弟通信

一.父组件传到子组件

---

父组件是通过props属性给子组件通信的
数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）

1. 父组件parent.vue代码如下：

父传子

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

 <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>

2. 子组件son代码如下：

 <template>
   <div class="son">
     <p>{
   {
    sonMsg }}</p>
     <p>子组件接收到内容：{
   {
    faMsg }}</p>
   </div>
 </template>