本文将详细介绍Vue2和Vue3中父子组件通信的方法，包括参数传递、变量获取以及方法调用。
1. 父组件给子组件的传参
Vue2
在Vue2中，父组件通过props向子组件传递参数。例如：
<!-- 父组件 -->
<template>
<child-component :message="parentMessage"></child-component>
</template>
<script>
export default {
data() {
return {
parentMessage: 'Hello from parent'
};
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>
Vue3
Vue3中，父组件向子组件传递参数的方式基本相同，但引入了setup，使得代码更加简洁：
<!-- 父组件 -->
<template>
<child-component :message="parentMessage"></child-component>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const parentMessage = ref('Hello from parent');
return { parentMessage };
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
import { defineProps } from 'vue';
export default {
props: ['message']
}
</script>
2. 子组件给父组件的传参
Vue2
在Vue2中，子组件通过$emit方法向父组件传递参数：
<!-- 子组件 -->
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('messageFromChild', 'Hello from child');
}
}
}
</script>
<!-- 父组件 -->
<template>
<child-component @messageFromChild="handleMessage"></child-component>
</template>
<script>
export default {
methods: {
handleMessage(message) {
console.log(message); // 'Hello from child'
}
}
}
</script>
Vue3
Vue3中，子组件向父组件传递参数的方式与Vue2类似：
<!-- 子组件 -->
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import { defineEmits } from 'vue';
export default {
setup() {
const emit = defineEmits(['messageFromChild']);
const sendMessage = () => {
emit('messageFromChild', 'Hello from child');
};
return { sendMessage };
}
}
</script>
<!-- 父组件 -->
<template>
<child-component @messageFromChild="handleMessage"></child-component>
</template>
<script>
export default {
setup() {
const handleMessage = (message) => {
console.log(message); // 'Hello from child'
};
return { handleMessage };
}
}
</script>
3. 获取父子组件之间的变量
Vue2
在Vue2中，可以通过$parent和$children访问父子组件的实例：
<!-- 父组件 -->
<template>
<child-component ref="child"></child-component>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.child.childMessage); // 'Message from child'
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ childMessage }}</div>
</template>
<script>
export default {
data() {
return {
childMessage: 'Message from child'
};
}
}
</script>
Vue3
Vue3中，可以通过provide和inject来实现跨组件的变量传递：
<!-- 父组件 -->
<template>
<child-component></child-component>
</template>
<script>
import { provide } from 'vue';
export default {
setup() {
provide('parentMessage', 'Message from parent');
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ parentMessage }}</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const parentMessage = inject('parentMessage');
return { parentMessage };
}
}
</script>
4. 父组件与子组件的方法相互调用
Vue2
在Vue2中，可以通过$refs来调用子组件的方法，子组件也可以通过$parent调用父组件的方法：
<!-- 父组件 -->
<template>
<child-component ref="child"></child-component>
</template>
<script>
export default {
methods: {
callChildMethod() {
this.$refs.child.childMethod();
}
}
}
</script>
<!-- 子组件 -->
<template>
<div></div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log('Child method called');
}
}
}
</script>
Vue3
Vue3中，同样可以通过ref和defineExpose来实现方法的相互调用：
<!-- 父组件 -->
<template>
<child-component ref="child"></child-component>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const child = ref(null);
const callChildMethod = () => {
child.value.childMethod();
};
return { child, callChildMethod };
}
}
</script>
<!-- 子组件 -->
<template>
<div></div>
</template>
<script>
import { defineExpose } from 'vue';
export default {
setup() {
const childMethod = () => {
console.log('Child method called');
};
defineExpose({ childMethod });
}
}
</script>
通过以上对比，我们可以看到 Vue3 在父子组件通信方面提供了更多的灵活性和简洁性。希望本文能帮助你更好地应用 Vue2 和 Vue3 中父子组件的通信。
