Using props
Props are custom attributes you can add to a component. When a value is passed to a prop attribute, it becomes a property of that component instance.
Vue.component('simple-button', {
props: ['text', 'type'],
template: `<button class="btn m-1" :class="'btn-'+type">{{ text }}</button>`
})
new Vue({ el: '#app' })
<div id="app">
<simple-button text="Click Me" type="primary"></simple-button>
<simple-button text="No, Click Me" type="success"></simple-button>
<simple-button text="Please, Click Me" type="danger"></simple-button>
</div>
The v-bind directive can be used with props as well, allowing you to dynamically create the custom elements and prop attributes.
Vue.component('simple-button', {
props: ['text', 'type'],
template: `<button class="btn m-1" :class="'btn-'+type">{{ text }}</button>`
})
new Vue({
el: '#app',
data: {
buttons: [
{text: 'Click Me', type='primary'},
{text: 'No, Click Me', type='success'},
{text: 'Please, Click Me', type='danger'}
]
}
})
<div id="app">
<simple-button
v-for="button in buttons"
:text="button.text"
:type="button.type"
></simple-button>
</div>