在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可以更方便地管理状态和逻辑。