vue props object code example
Example 1: vuejs props
<script>
export default {
props: {
name: {
type: String,
required: true
}
}
};
</script>
<template>
<your-component name="name"></your-component>
</template>
Example 2: vue js default prop
props: {
name: {
type: String,
default: 'John Doe'
}
}
Example 3: props vue js
Vue.component('my-component', {
props: {
propA: Number,
propB: [String, Number],
propC: {
type: String,
required: true
},
propD: {
type: Number,
default: 100
},
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
propF: {
validator: function (value) {
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
Example 4: vue prop string or number
props: {
users_count: {
type: [Number, String],
required: true
}
},
Example 5: vue js props
Vue.component('blog-post', {
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>
Example 6: vuejs props
export default {
name: 'Camera',
props: ['name', 'img'],
}