Vue3+TypeScript父子组件传值

作者：System 时间：2024年08月23日分类：所有,typescript 字数：1045

这篇文章距离上次修改已过261天，其中的内容可能已经有所变动。

在Vue 3和TypeScript中，父子组件传值可以通过props和emit进行。以下是一个简单的示例：

父组件 (ParentComponent.vue):

<template>
  <div>
    <child-component :parentData="parentData" @childEvent="handleChildEvent" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentData = ref('Hello from parent');

const handleChildEvent = (value: string) => {
  console.log(`Received: ${value}`);
};
</script>

子组件 (ChildComponent.vue):

<template>
  <div>
    <p>{{ parentData }}</p>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  parentData: string;
}>();

const emit = defineEmits(['childEvent']);

const sendToParent = () => {
  emit('childEvent', 'Data from child');
};
</script>

在这个例子中，父组件通过props向子组件传递数据，并监听一个自定义事件childEvent。子组件通过点击按钮触发一个事件，并发送数据给父组件。这里使用了Vue 3的<script setup>语法，并且类型安全地使用了TypeScript。

Vue3+TypeScript父子组件传值

评论已关闭

推荐阅读