组件的通信(子传父，父传子，兄弟互传)

一、父传子

1. 子组件中通过defineProps来定义父组件可以传入子组件的属性、数据

2. defineProps是一个方法，他能接受数组，也能接受对象

3. 当接受对象的时候，可以确定传入属性的类型、是否必传、是否有默认值

4. 注意事项：使用props的时候，只能由父到子，不能由子到父

 defineProps

        用在子组件，接收父组件的传值，用来声明props。

1. 作用 它可以帮助我们在组件中自定义 props,并定义它们的数据类型和默认值。使用这个新特性,可以更加方便地管理组件的 Props 数据。

2. 原理 defineProps() 宏中的参数不可以访问

   子组件：
   
   
   

   二、子传父

   1. 子组件通过自定义事件的方式来向父组件传递数据

   2. 子组件通过defineEmits方法，定义可以向父组件传递的事件

   3. defineEmits是一个方法，他能接受数组，数组之中每一个字符串，都代表一个可以向父组件emit的事件

   4. 特殊的子传父：父组件通过props，传递一个方法给子组件，子组件通过调用此方法，来更新数据到父组件。

   defineEmits

           用在子组件，将子组件的方法传递给父组件，用来声明emits

   1. 作用 用于在setup中注册自定义事件，方便开发者监听和绑定事件。是一个宏函数，使用时无需导入

   2. 原理 不可以访问

              子组件通过defineEmits(['childMessage'])，定义了组件可以向外（也就是向父组件）发射的事件列表，这里只定义childMessage这一个事件。

              调用emit('childMessage', 'hello parent')来触发childMessage事件，并向父组件传递数据。

      父组件：
      
      
      

              父组件使用了名为Child的自定义子组件监听了子组件触发的childMessage事件，当该事件被触发时，会调用父组件中定义的 showChildMessage方法来处理相关逻辑。

      三、兄弟互传

              原理：指的是在同一层级的组件之间进行数据传递和事件处理。在 Vue 的组件结构中，兄弟组件没有直接的父子关系，因此不能直接通过 props 或 emit 进行通信，兄弟组件可以通过一个公共的事件来发送和接收事件，从而实现数据的传递。

      练习：点菜

              

      1. 点击新增，新增菜到下面的列表中

      2. 点击列表中的删除，删除当前菜（补充一下数组的删除方法）

      3. 补充需求：

         1. 输入菜名后，按enter可以直接将菜名添加到下面，并且清除input中的内容

         2. 必须要有菜名才能添加制作一个菜名管理程序，可以在程序中新增菜名和删除菜名

           要求：

               顶部的输入和按钮为一个组件，底下的展示为一个组件

               通过兄弟组件传参来实现兄弟组件中状态的共享

      输入按钮组件：
      
      
      

      展示组件：
      
      
      

      公共事件：