// 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)
}
}
// Component file
<script>
export default {
props: {
name: {
type: String,
required: true
}
}
};
</script>
// File you call your component
<template>
<your-component name="name"></your-component>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
widths: {
type: String,
default: '100%',
}
})
// do some stuff
// access the value by
// let w = props.widths
</script>
<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>
Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>
// Even better!
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}