vue2同级传递参数

在 Vue.js 2.x 中，同级组件间的通信可以通过 props（属性）和事件（$emit 和 $on）来进行参数传递。下面是一个基本的例子：

1. **Props向下传递**：
如果父组件想向子组件传递数据，可以在子组件标签上定义props，并在父组件中通过数据绑定的方式传值：

   <!-- 父组件 -->
   <child-component :data="parentData"></child-component>

   // 父组件的script部分
   export default {
     data() {
       return {
         parentData: '这是父组件的数据'
       }
     }
   }

子组件接收并使用这个数据：

   // 子组件（child-component.vue）
   props: ['data'],
   created() {
     console.log('从父组件接收的数据:', this.data);
   }

2. **自定义事件向上传递**：
如果子组件需要通知父组件更新某个状态，可以使用自定义事件（$emit）：

   <!-- 子组件 -->
   <button @click="doSomething">点击我</button>

   // 子组件的methods部分
   methods: {
     doSomething() {
       this.$emit('updateParentState', '新状态');
     }
   }

在父组件监听这个事件并处理：

   // 父组件的script部分
   methods: {
     handleParentStateUpdate(state) {
       console.log('子组件更新了状态:', state);
     }
   },
   // 父组件模板中绑定事件处理
   <child-component @updateParentState="handleParentStateUpdate"></child-component>