Vue 组件通信

• 父传子 - 在组件标签上通过自定义属性的形式:list="list"绑定数据，然后在子组件中通过props接收props:[list]
  示例：
  1.父组件

    //组件标签 - 父组件（绑定数据）
    <template>
      <div>
        <app-list :list="lists" />
     </div>
    </template>

    <script>
      import appList from './list'  // 引入list组件

      export default {
        data () {   // 定义数据
            return {
              lists: ['熊大', '熊二', '熊三']
           }
        },
        components: { // 实例化
          appList
        },
      }
    </script>

2. 子组件

   //组件标签 - 子组件（通过props接收）
   <template>
     <div>
       <ul>
          <li v-for="(item, index) in list" :key="index" >{{ item }}</li>
       </ul>
     </div>
   </template>

  <script>
     export default {
       props:['list'],  // 通过props接收
     }
  </script>

• 子传父 - 在子组件中通过this.$emit('自定义事件名称', '要传递的数据')，完成子组件配置，在父组件中的子组件的组件标签上通过@自定义事件="事件处理函数"，来完成父组件接收的任务
  示例：
  1.子组件

    // 子组件 - 发射
    <template>
      <div>
         <ul>
            <li v-for="(item, index) in list" :key="index" @click="selectedVal(item)">{{ item }}</li>
         </ul>
      </div>
    </template>
    
    <script>
       export default {
          props:['list'],
          methods: {
            selectedVal (val) {
              this.$emit('receive', val)  // 点击的时候传递 => 第一个参数：“自定义事件名称”；第二个参数：你要传递的数据
            }
          }
        }
    </script>

2. 父组件

    // 父组件 - 接收
    <template>
      <div>
        <app-list :list="lists" @receive="handleSelected" />
      </div>
     </template>
    
    <script>
       import appList from './list'  // 引入list组件

        export default {
          data () {   // 定义数据
              return {
                lists: ['熊大', '熊二', '熊三'],
                defaultVal:""  //给显示框定义的
             }
          },
          components: { // 实例化
            appList
          },
          methods:{   // 这一步是当你点击list里面的任意一个是时将他显示在文本框里
            handleSelected (val) {
               this.defaultVal = val
            }
          }
        }
    </script>

• 兄弟之间 - 可以借助于父组件作为中转完成通信 子 > 父 > 子

中央通信

目前中央通信是解决组件通信的最佳方法。

无需关注组件嵌套层级，也无需关注组件关系

$emit - 完成发射

$on - 监听