Example 1: vuejs props
// 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>
Example 2: vue js default prop
props: {
name: {
type: String,
default: 'John Doe'
}
}
Example 3: props vue js
Vue.component('my-component', {
props: {
// Basic type check (`null` and `undefined` values will pass any type validation)
propA: Number,
// Multiple possible types
propB: [String, Number],
// Required string
propC: {
type: String,
required: true
},
// Number with a default value
propD: {
type: Number,
default: 100
},
// Object with a default value
propE: {
type: Object,
// Object or array defaults must be returned from
// a factory function
default: function () {
return { message: 'hello' }
}
},
// Custom validator function
propF: {
validator: function (value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
Example 4: root template
'DIRS': [BASE_DIR / 'templates'],
Example 5: how to access both child event param and parent param in vue
<template>
<ul>
<product v-for="product in products"
:product="product"
@add="addToChart" />
</ul>
</template>
<script>
const Product = {
props: ["product"],
render(h) {
return h("li", { on: { click: this.click } }, this.product);
},
methods: {
click() {
this.$emit("add", { product: this.product, quantity: 42 });
}
}
};
export default {
data() {
return {
products: ["Foo", "Bar"]
};
},
components: {
Product
},
methods: {
addToChart({ product, quantity }) {
console.log(product, quantity);
}
}
}
</script>
Example 6: vue js props
Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<blog-post post-title="hello!"></blog-post>