通过 defineProps 子传父
时间: 2023-12-03 17:40:52 浏览: 14
根据提供的引用内容,defineProps是Vue 3中的一个新特性,用于定义组件的props。在Vue 3中,子组件通过emit事件向父组件传递数据,而不是像Vue 2中那样通过$emit方法。因此,使用defineProps定义props后,子组件可以通过props属性访问父组件传递的数据。
下面是一个使用defineProps和emit实现子传父的示例:
```html
<!-- 父组件 -->
<template>
<div>
<h1>{{ title }}</h1>
<<child-component :likes="likes" @update-likes="updateLikes" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
title: 'Parent Component',
likes: 0
}
},
methods: {
updateLikes(newLikes) {
this.likes = newLikes
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<h2>{{ likes }} Likes</h2>
<button @click="addLike">Add Like</button>
</div>
</template>
<script>
import { defineProps } from 'vue'
export default {
props: defineProps({
likes: Number
}),
methods: {
addLike() {
this.$emit('update-likes', this.likes + 1)
}
}
}
</script>
```
在上面的示例中,父组件通过向子组件传递likes属性来初始化子组件的props。子组件通过defineProps定义likes属性,然后在addLike方法中通过$emit方法触发update-likes事件,并将新的likes值作为参数传递给父组件。父组件通过updateLikes方法接收新的likes值,并更新likes属性。