Vue 组件之间传值通信（常用方法以及示例）

在Vue中，组件间传值通常可以通过以下几种方法实现：

1. 使用props传递数据到子组件。
2. 使用自定义事件$emit从子组件发送数据到父组件。
3. 使用Vuex进行状态管理，实现组件间共享状态。
4. 使用$refs直接访问子组件的实例。
5. 使用provide/inject实现跨多层级组件的传值。

以下是使用props和$emit的简单示例：

父组件：

<template>
  <div>
    <child-component :parentData="dataFromParent" @childEvent="handleChildEvent"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromParent: 'Hello from Parent'
    };
  },
  methods: {
    handleChildEvent(dataFromChild) {
      console.log('Data from child:', dataFromChild);
    }
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>
 
<script>
export default {
  props: ['parentData'],
  methods: {
    sendDataToParent() {
      const dataToSend = 'Hello from Child';
      this.$emit('childEvent', dataToSend);
    }
  }
};
</script>

在这个例子中，父组件通过props将数据传递给子组件，子组件通过点击按钮触发一个事件，并使用$emit发送数据回父组件。父组件监听这个事件，并在方法handleChildEvent中处理接收到的数据。