vue2 同级组件传参

在Vue 2中，同级组件之间的传参可以通过props和事件（$emit）来实现。以下是两种常见的方式：

1. **Props（属性传递）**：
如果A组件需要向B组件传递数据，A组件可以作为`父组件`，将数据设置为`prop`并绑定到模板上。然后B组件作为`子组件`接收这个prop。示例代码如下：

   <template>
     <div>
       <!-- A组件 -->
       <b-component :data="parentData" />
     </div>
   </template>

   <script>
   export default {
     data() {
       return { parentData: 'some value' };
     },
     components: {
       BComponent: {
         props: ['data'], // 定义接收到的prop
         template: '<p>{{ data }}</p>'
       }
     }
   }
   </script>

2. **自定义事件（$emit）**：
如果数据从B组件反向传递给A组件，B组件可以在某个操作后触发一个自定义事件，并在A组件中监听这个事件处理它。例如：

   <template>
     <button @click="sendToParent">点击我</button>
   </template>

   <script>
   export default {
     methods: {
       sendToParent() {
         this.$emit('parent-event', 'data from B');
       }
     }
   }
   </script>
   
   <!-- A组件 -->
   <template>
     <b-component @parent-event="handleEvent"></b-component>
   </template>
   <script>
   export default {
     methods: {
       handleEvent(data) {
         console.log('Received data:', data);
       }
     }
   }
   </script>