Vue 3 TypeScript Component Props Example
Vue 3 has first-class support for TypeScript. This is an example of using the defineComponent
, computed
, ref
methods to define a component with props:
import { defineComponent, computed, ref } from 'vue'
interface Product {
name: string
price: number
}
export default defineComponent({
props: {
product: {
type: Object as () => Product,
required: true
}
},
setup ({ product }) {
const p = computed(() => `${product.name} ${product.price}`)
const title = ref('List of products')
return {
p,
title
}
}
})
Our component accepts a required product
prop of type Product
. As you see we can strongly type the component props using TypeScript typing system.
The setup
function is a new component method that acts as the entry point for using the Composition API with components. It gets invoked right after the initial props resolution when a component instance is created. It's called before the beforeCreate
life-cycle hook.
We can access the props passed to the component from the first argument of the setup
method. In our example, we dereference the props
argument to extract the product
prop which is the only prop that will be passed to our component.
If setup
returns an object, the properties on the object will be merged on to the render context for the component's template. In our example, we return the p
and title
objects from the setup
method to make them available in the component's template.
The ref
method takes an inner value and returns a reactive and mutable ref object which has a single property called .value
that points to the inner value. However when a ref is returned as a property on the render context, i.e the object returned from setup()
method, and accessed in the template, it automatically unwraps to the inner value so we don't have to append .value
in the template:
<template>
<h1></h1>
</template>
References
-
Date: