Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）

在Vue 2中，子组件与父组件之间的通信通常通过props和$emit来实现。

父传子：在父组件中绑定数据到子组件的props上。

<!-- 父组件 -->
<template>
  <child-component :parentData="dataFromParent"></child-component>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromParent: '这是父组件的数据'
    };
  }
};
</script>

子传父：在子组件中使用$emit来触发一个事件，并传递数据。

<!-- 子组件 -->
<template>
  <button @click="sendToParent">发送到父组件</button>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('custom-event', '这是子组件的数据');
    }
  }
};
</script>

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

<!-- 父组件 -->
<template>
  <child-component @custom-event="receiveFromChild"></child-component>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveFromChild(data) {
      console.log(data); // 这是子组件的数据
    }
  }
};
</script>

在Vue 3中，可以使用props和emit，或者使用provide和inject，或者使用ref和emit结合组合式API。

Vue 3的API变化不大，但是Vue 3引入了Composition API，可以让代码更加简洁和模块化。

父传子使用props结合setup函数：

<template>
  <ChildComponent :parentData="dataFromParent" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const dataFromParent = ref('这是父组件的数据');
</script>

子传父使用emit：

<template>
  <button @click="sendToParent">发送到父组件</button>
</template>
 
<script setup>
import { defineEmits } from 'vue';
 
const emit = defineEmits(['custom-event']);
 
function sendToParent() {
  emit('custom-event', '这是子组件的数据');
}
</script>

父组件监听事件：

<template>
  <ChildComponent @custom-event="receiveFromChild" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
function receiveFromChild(data) {
  console.log(data); // 这是子组件的数据
}
</script>

以上代码展示了Vue 2和Vue 3中父子组件之间通信的基本方法。在Vue 3中，使用Composition API可以更方便地管理状态和逻辑。