vue2 父传子，子传父

在Vue 2中，使用props来从父组件向子组件传递数据，而要从子组件向父组件传递数据，通常需要使用自定义事件。关键字分别是：

1. 从父组件向子组件传递数据（父传子）：
   • props：可以在子组件中使用props来接收父组件传递的数据。在父组件中，使用子组件标签的属性来传递数据。

示例：

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: "这是父组件的消息"
    };
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String // 子组件通过props接收父组件的数据
  }
}
</script>

2. 从子组件向父组件传递数据（子传父）：
   • $emit：可以在子组件中使用$emit触发自定义事件，并在父组件中监听这些事件。

示例：

<!-- 子组件 -->
<template>
  <button @click="sendMessageToParent">向父组件发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('child-event', "这是子组件发送的消息");
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleChildEvent(message) {
      console.log("父组件接收到子组件的消息:", message);
    }
  }
}
</script>

在这个示例中，子组件使用$emit触发名为child-event的自定义事件，并传递一条消息，而父组件使用@child-event监听这个事件，从而接收来自子组件的数据。