vue3+ts 子传父
时间: 2023-09-16 12:10:37 浏览: 47
在Vue 3中,通过使用事件将数据从子组件传递给父组件。以下是在Vue 3和TypeScript中实现子传父的示例:
首先,在子组件中定义一个事件,通过`@emit`修饰符触发该事件,并将需要传递给父组件的数据作为参数进行传递:
```typescript
// ChildComponent.vue
<template>
<button @click="onButtonClick">点击传递数据给父组件</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
emits: ['dataToParent'], // 定义一个名为"dataToParent"的事件
setup(_, { emit }) {
const onButtonClick = () => {
const data = 'Hello from child component';
emit('dataToParent', data); // 触发"dataToParent"事件,并传递数据给父组件
};
return {
onButtonClick,
};
},
});
</script>
```
然后,在父组件中监听子组件触发的事件,并处理传递过来的数据:
```typescript
// ParentComponent.vue
<template>
<div>
<p>从子组件接收到的数据:{{ receivedData }}</p>
<child-component @dataToParent="onDataReceived"></child-component>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
data() {
return {
receivedData: '',
};
},
methods: {
onDataReceived(data: string) {
this.receivedData = data; // 处理从子组件传递过来的数据
},
},
});
</script>
```
在父组件中,我们通过`@dataToParent`监听子组件触发的事件,并在`onDataReceived`方法中处理接收到的数据。这样,子组件就可以将数据传递给父组件了。
请注意,上述示例是在Vue 3和TypeScript环境下实现子传父的一种方式。你也可以使用其他方式来实现,例如使用Provide/Inject或Vuex等。