Vue 3 + TypeScript 实现父子组件协同工作案例解析

ttod_qzstudio

已于 2025-01-31 08:43:02 修改

阅读量625

点赞数 6

分类专栏： VUE 文章标签： typescript vue.js

于 2025-01-27 15:38:24 首次发布

本文链接：https://blog.youkuaiyun.com/ttod/article/details/145380276

版权

VUE 专栏收录该内容

16 篇文章

订阅专栏

引言

在现代的前端开发中，Vue.js 作为一款流行的渐进式 JavaScript 框架，为我们构建交互式用户界面提供了强大的支持。Vue 3 的推出带来了许多新特性，尤其是组合式 API 的引入，让代码的组织和复用更加灵活。同时，TypeScript 的使用也为 Vue 项目带来了静态类型检查的优势，提高了代码的可维护性和健壮性。本文将通过一个具体的案例，展示如何在 Vue 3 中使用 TypeScript 实现父子组件的协同工作，并运用一些推荐的特性，如 setup、ref、computed、watch、emits 等。

项目结构

首先，我们来看一下项目的基本结构：

src
├── components
│   ├── ParentComponent.vue
│   └── ChildComponent.vue
└── main.ts

代码实现

`ParentComponent.vue`

<template>
  <div>
    <h1>Parent Component</h1>
    <p>Count In Parent:{
  
  {count}}</p>
    <button @click="incrementParentCount">Increment Parent Count</button>
    <ChildComponent :initialCount="count" @child-count-updated="updateParentCount" />
  </div>
</template>

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

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    // 使用 ref 创建响应式数据
    const count = ref<number>(0);

    // 父组件的方法，用于增加计数
    const incrementParentCount = () => {
      count.value++;
    };

    // 处理子组件触发的事件
    const updateParentCount = (newCount: number) => {
      count.value = newCount;
    };

    return {
      count,
      incrementParentCount,
      updateParentCount
    };
  }
});
</script>

在 ParentComponent.vue 中，我们使用 defineComponent 定义组件。通过 ref 创建了一个响应式的 count 变量，用于存储父组件的计数。incrementParentCount 方法用于增加父组件的计数。同时，我们监听了子组件触发的 child-count-updated 事件，并在 updateParentCount 方法中更新父组件的计数。

`ChildComponent.vue`

<template>
  <div>
    <h2>Child Component</h2>
    <p>Count in Child: {
  
  { childCount }}</p>
    <button @click="incrementChildCount">Increment Child Count</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch, PropType } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  props: {
    initialCount: {
      type: Number as PropType<number>,
      required: true
    }
  },
  emits: ['child-count-updated'],
  setup(props, { emit }) {
    // 使用 ref 创建响应式数据，初始值来自父组件的 props
    const childCount = ref<number>(props.initialCount);

    // 计算属性，计算子组件计数的两倍
    const doubleCount = computed(() => childCount.value * 2);

    // 监听子组件计数的变化，并触发事件通知父组件
    watch(childCount, (newValue) => {
      emit('child-count-updated', newValue);
    });

    // 子组件的方法，用于增加计数
    const incrementChildCount = () => {
      childCount.value++;
    };

    return {
      childCount,
      doubleCount,
      incrementChildCount
    };
  }
});
</script>

在 ChildComponent.vue 中，我们接收父组件传递的 initialCount 作为 props。使用 ref 创建了一个响应式的 childCount 变量，其初始值为 props.initialCount。通过 computed 定义了一个计算属性 doubleCount，用于计算子组件计数的两倍。使用 watch 监听 childCount 的变化，当计数发生变化时，触发 child-count-updated 事件通知父组件。incrementChildCount 方法用于增加子组件的计数。

`main.ts`

import { createApp } from 'vue';
import ParentComponent from './components/ParentComponent.vue';

//使用 createApp 函数创建了一个 Vue 应用实例，并将 ParentComponent 作为根组件传递给它。
const app = createApp(ParentComponent);
//创建的 Vue 应用实例挂载到 DOM 中的指定元素上，从而使 Vue 应用开始运行并渲染到页面上。
app.mount('#app');

在 main.ts 中，我们创建了 Vue 应用实例，并将 ParentComponent 挂载到 DOM 中的 #app 元素上。