Vue 2和Vue 3在父子组件通信方面提供了多种方法,这些方法各有特点和适用场景。以下是对这两个版本在父子通信方面的总结和归纳:
Vue 2
- 父传子:
- 使用
props
:父组件通过标签属性将数据传递给子组件,子组件通过props
选项接收数据。 - 使用
ref
和$refs
:父组件给子组件加上ref
属性,然后在父组件中通过this.$refs.子组件
访问子组件实例,直接调用子组件的方法或属性。 - 使用
:属性.sync
:Vue 2.3.0+新增的语法糖,用于子组件修改父组件的属性值(需配合this.$emit('update:属性', 新值)
)。 - 示例代码 <!-- 父组件 -->
<template>
<child-component :myProp="value"></child-component>
</template>
<script>
export default {
data() {
return {
value: 'Hello from parent'
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>{{ myProp }}</div>
</template>
<script>
export default {
props: ['myProp']
};
</script>
- 使用
- 子传父:
- 使用
$emit
:子组件通过调用内建的$emit
方法并传入事件名称来触发一个事件,父组件可以通过v-on:
或@
方法监听子组件的自定义事件,并在事件回调函数中处理数据。 - 使用
$parent
:子组件可以通过this.$parent
访问父组件,但这种方式并不常用,因为它可能导致组件的耦合性过高。 - 示例代码 <!-- 子组件 -->
<template>
<button @click="sendDataToParent">Send Data</button>
</template>
<script>
export default {
methods: {
sendDataToParent() {
this.$emit('myEvent', 'Hello from child');
}
}
};
</script>
<!-- 父组件 -->
<template>
<child-component @myEvent="handleData"></child-component>
</template>
<script>
export default {
methods: {
handleData(data) {
console.log(data); // 输出 'Hello from child'
}
}
};
</script>
- 使用
Vue 3
Vue 3在组件通信方面引入了一些新的API和概念,但基本的父子通信方式与Vue 2类似,同时也有一些新的改进和特性。
- 父传子:
- 使用
defineProps
:Vue 3的Composition API中的defineProps
函数用于定义组件的props。父组件通过标签属性将数据传递给子组件,子组件使用defineProps
接收数据。 - 使用
reactive
和ref
:Vue 3中,可以使用reactive
和ref
创建响应式数据,并在父组件中通过标签属性传递给子组件。
- 使用
- 子传父:
- 使用
defineEmits
:Vue 3的Composition API中的defineEmits
函数用于定义组件可以触发的自定义事件。子组件通过调用emit
函数并传入事件名称和参数来触发事件,父组件可以通过v-on:
或@
方法监听子组件的自定义事件。 - 使用
defineExpose
:子组件可以使用defineExpose
主动暴露其方法或属性给父组件,父组件通过ref
和$refs
访问子组件实例,然后调用这些暴露的方法或属性。
- 使用
总结
Vue 2和Vue 3在父子组件通信方面提供了多种方法,包括使用props
、$emit
、ref
、$refs
、:属性.sync
、defineProps
、defineEmits
和defineExpose
等。这些方法各有特点和适用场景,开发者可以根据项目的具体需求选择最适合的通信方式。同时,Vue 3的Composition API为组件通信提供了更多的灵活性和选择性。