vue3+ts深入组件Props实例详解

更新时间：2023年09月02日 10:49:51 作者：一花一world

Props是组件之间进行数据传递的一种方式，可以将数据从父组件传递给子组件，这篇文章主要介绍了vue3+ts深入组件Props的实例详解,需要的朋友可以参考下

在Vue 3和TypeScript中，深入了解组件的Props是非常重要的。Props是组件之间进行数据传递的一种方式，可以将数据从父组件传递给子组件。
首先，在Vue 3中定义Props的方式有所改变。在组件的选项中，我们可以使用props属性来定义Props的类型和验证规则。例如：

import { defineComponent, PropType } from 'vue';
export default defineComponent({
  props: {
    // 基本类型的Props
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    },
    // 自定义类型的Props
    person: {
      type: Object as PropType<{ name: string, age: number }>,
      required: true
    },
    // 数组类型的Props
    hobbies: {
      type: Array as PropType<string[]>,
      default: () => []
    }
  },
  // ...
});

在上面的例子中，我们定义了几个不同类型的Props。name是一个必需的字符串类型的Props，age是一个可选的数字类型的Props，默认值为18。person是一个必需的自定义类型的Props，它是一个包含name和age属性的对象。hobbies是一个可选的数组类型的Props，默认值为空数组。

在使用Props时，我们可以在子组件中通过props选项来访问它们。例如：

import { defineComponent } from 'vue';
export default defineComponent({
  props: ['name', 'age', 'person', 'hobbies'],
  // ...
  created() {
    console.log(this.name); // 访问字符串类型的Props
    console.log(this.age); // 访问数字类型的Props
    console.log(this.person); // 访问自定义类型的Props
    console.log(this.hobbies); // 访问数组类型的Props
  }
});

在上面的例子中，我们通过props选项将Props声明为组件的属性。然后，在组件的created生命周期钩子中，我们可以通过this关键字来访问这些Props。

此外，还可以使用TypeScript的类型注解来提供Props的类型检查。例如：

import { defineComponent } from 'vue';
interface Person {
  name: string;
  age: number;
}
export default defineComponent({
  props: {
    person: {
      type: Object as () => Person,
      required: true
    }
  },
  // ...
});

在上面的例子中，我们使用了TypeScript的接口来定义Person类型，并在props选项中使用了类型注解来指定person的类型为Person。

总结一下，在Vue 3和TypeScript中，我们可以使用props选项来定义和验证组件的Props。可以使用不同类型的Props，包括基本类型、自定义类型和数组类型。在子组件中，可以通过props选项来访问这些Props，并使用TypeScript的类型注解来提供类型检查。这样可以更安全和可靠地进行组件间的数据传递。

传递静态prop

在Vue 3和TypeScript中，如果要传递静态的Props，可以在父组件中直接在子组件的标签上使用Props的语法来传递静态值。

例如，假设我们有一个子组件ChildComponent，它有一个接受字符串类型的Props message。

import { defineComponent, PropType } from 'vue';
export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  // ...
});

在父组件中，可以在子组件的标签上使用Props的语法来传递静态值。

<template>
  <div>
    <child-component message="Hello, World!"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  }
};
</script>

在上面的例子中，我们在ChildComponent的标签上使用message属性，并传递了静态的字符串值"Hello, World!"。

在子组件中，可以通过props选项来接收传递的静态Props。

import { defineComponent } from 'vue';
export default defineComponent({
  props: ['message'],
  // ...
  created() {
    console.log(this.message); // 输出：Hello, World!
  }
});

在上面的例子中，我们在子组件的created生命周期钩子中，通过this.message来访问传递的静态Props。

传递非字符串类型，使用v-bind

如果要传递非字符串类型的Props，并且希望使用动态的值，可以使用v-bind指令来绑定Props。

例如，假设我们有一个子组件ChildComponent，它有一个接受数字类型的Props count。

import { defineComponent, PropType } from 'vue';
export default defineComponent({
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  // ...
});

在父组件中，可以使用v-bind指令来绑定Props的值。

<template>
  <div>
    <child-component :count="totalCount"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      totalCount: 10
    };
  }
};
</script>

在上面的例子中，我们使用v-bind指令来绑定子组件的count属性，并将其值绑定到父组件的totalCount变量上。

在子组件中，可以通过props选项来接收传递的动态Props。

import { defineComponent } from 'vue';
export default defineComponent({
  props: ['count'],
  // ...
  created() {
    console.log(this.count); // 输出：10
  }
});

在上面的例子中，我们在子组件的created生命周期钩子中，通过this.count来访问传递的动态Props。

prop校验，单向数据流

在Vue中，可以通过使用props选项来对Props进行校验，以确保传递给组件的数据满足特定的要求。

例如，假设我们有一个子组件ChildComponent，它有一个接受数字类型的Props count，并且要求传递的值必须大于0。

import { defineComponent, PropType } from 'vue';
export default defineComponent({
  props: {
    count: {
      type: Number,
      required: true,
      validator: (value: number) => value > 0
    }
  },
  // ...
});

在上面的例子中，我们在props选项中定义了count属性，并指定了它的类型为Number，并且设置了required: true，表示这个Props是必需的。同时，我们还使用了一个自定义的校验函数validator，该函数接受传递的值作为参数，返回一个布尔值，用于校验传递的值是否满足要求。

在父组件中，如果传递的Props不满足校验要求，Vue会在控制台中输出警告信息。

<template>
  <div>
    <child-component :count="totalCount"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      totalCount: -5
    };
  }
};
</script>

在上面的例子中，我们在父组件中将totalCount设置为-5，这违反了子组件的校验规则。

到此这篇关于vue3+ts深入组件Props实例详解的文章就介绍到这了,更多相关vue3+ts深入组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3下watch的使用方法示例
vue3中的watch是一个组合式的API使用时需要引入,下面这篇文章主要给大家介绍了关于vue3下watch使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
vue父组件异步传递props值,子组件接收不到解决方案
这篇文章主要介绍了vue父组件异步传递props值,子组件接收不到解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue使用new Image()实现图片预加载功能
这篇文章主要介绍了如何在 Vue 中实现图片预加载的一个简单小demo以及优化方案,文中通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-11-11
vue实现百分比占比条效果
这篇文章主要为大家详细介绍了vue实现百分比占比条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
VUE 记账凭证模块组件的示例代码
这篇文章主要介绍了VUE记账凭证模块组件的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-03-03
vue,uniapp--js禁止页面滚动,取消滚动方式
这篇文章主要介绍了vue,uniapp--js禁止页面滚动,取消滚动方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
Pinia进阶setup函数式写法封装到企业项目
这篇文章主要为大家介绍了Pinia进阶setup函数式写法封装到企业项目实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
示例解析Ant Design Vue组件slots作用
这篇文章主要为大家通过示例解析Ant Design Vue组件slots作用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
Vue.js函数式组件的全面了解
函数式组件就是函数是组件,组件是函数,它的特征是没有内部状态、没有生命周期钩子函数、没有this（不需要实例化的组件）,这篇文章主要给大家介绍了关于Vue.js函数式组件的相关资料,需要的朋友可以参考下
2021-10-10
Vuex存值取值与异步请求处理方式
本文将详细介绍Vuex的使用方法,包括参数值的获取、修改,以及异步数据处理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04