// single file component
<script setup>
const props = defineProps({
foo: String
})
</script>
// or without "setup" in script tag
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}<script setup> // vue 3 component
const props = defineProps({ // No need to import defineProps!
title: String, likes: Number, isPublished: Boolean,
commentIds: Array, author: Object, callback: Function,
contactsPromise: Promise // or any other constructor
})
... use props.title ... props.contatcsPromise
</script><!-- Dynamically assign the value of a variable -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- Dynamically assign the value of a complex expression -->
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>