Detailed explanation of vue3+ts In-depth Component Props Instance

In Vue 3 and TypeScript, it is very important to have a deep understanding of component Props. Props is a way of data passing between components, which can pass data from parent components to child components.
First, the way Props is defined in Vue 3 has changed. In the component's options we can usepropsProperties to define the type and validation rules of Props. For example:

import { defineComponent, PropType } from 'vue';
export default defineComponent({
  props: {
    // Basic types of Props    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    },
    // Custom type Props    person: {
      type: Object as PropType<{ name: string, age: number }>,
      required: true
    },
    // Array type Props    hobbies: {
      type: Array as PropType<string[]>,
      default: () => []
    }
  },
  // ...
});

In the example above, we define several different types of Props.nameis a required string type Props,ageis an optional numeric type Props with a default value of 18.personis a required custom type Props, it is a includednameandageObject of attribute.hobbiesis an optional array type Props, with the default value being an empty array.

When using Props, we can pass in the child componentpropsOptions to access them. For example:

import { defineComponent } from 'vue';
export default defineComponent({
  props: ['name', 'age', 'person', 'hobbies'],
  // ...
  created() {
    (); // Access string type Props    (); // Access numeric type Props    (); // Access custom types of Props    (); // Access array type Props  }
});

In the example above, we passpropsOption declares Props as a property of the component. Then, in the componentcreatedIn the life cycle hook, we can passthisKeywords to access these Props.

In addition, type annotations from TypeScript can also be used to provide type checking for Props. For example:

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

In the example above, we used TypeScript interface to definePersonType, and inpropsType annotations are used in the options to specifypersonThe type ofPerson。

To sum up, in Vue 3 and TypeScript, we can usepropsOptions to define and verify component Props. Different types of Props can be used, including primitive types, custom types, and array types. In the subcomponent, it can be done bypropsOptions to access these Props and use TypeScript's type annotations to provide type checking. This allows data transfer between components to be more secure and reliable.

Passing a static prop

In Vue 3 and TypeScript, if you want to pass static Props, you can use the syntax of Props directly on the label of the child component in the parent component to pass static values.

For example, suppose we have a child componentChildComponent, it has a Props that accepts string typemessage。

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

In the parent component, the static value can be passed using Props syntax on the label of the child component.

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

In the example above, weChildComponentUse on the tagmessageproperty and pass the static string value "Hello, World!".

In the subcomponent, it can be done bypropsOption to receive passed static Props.

import { defineComponent } from 'vue';
export default defineComponent({
  props: ['message'],
  // ...
  created() {
    (); // Output: Hello, World!  }
});

In the example above, we are in the subcomponentcreatedIn the life cycle hook, throughto access the passed static Props.

Pass non-string type, using v-bind

If you want to pass Props of non-string type and want to use dynamic values, you can usev-bindDirective to bind Props.

For example, suppose we have a child componentChildComponent, it has a Props that accepts numeric typescount。

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

In the parent component, you can usev-bindDirective to bind the value of Props.

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

In the example above, we usev-bindDirective to bind subcomponentscountattribute, and bind its value to the parent component'stotalCounton variables.

In the subcomponent, it can be done bypropsOption to receive dynamic Props passed.

import { defineComponent } from 'vue';
export default defineComponent({
  props: ['count'],
  // ...
  created() {
    (); // Output: 10  }
});

In the example above, we are in the subcomponentcreatedIn the life cycle hook, throughto access the delivered dynamic Props.

Prop check, one-way data flow

In Vue, it can be usedpropsOptions to verify Props to ensure that the data passed to the component meets specific requirements.

For example, suppose we have a child componentChildComponent, it has a Props that accepts numeric typescount, and the value passed must be greater than 0.

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

In the example above, wepropsThe options are definedcountattribute and specify its type asNumber, and set uprequired: true, indicating that this Props is required. At the same time, we also use a custom check functionvalidator, The function accepts the passed value as a parameter and returns a Boolean value to verify whether the passed value meets the requirements.

In the parent component, if the passed Props does not meet the verification requirements, Vue will output a warning message in the console.

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

In the above example, we will use the parent component tototalCountSet to -5, which violates the verification rules of the child components.

This is the end of this article about the detailed explanation of the vue3+ts in-depth component Props instance. For more related vue3+ts in-depth component content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!