What's the clean way to pass infos such as class to a component?

Say I’ve got a component like this (intentionally simplified to get my point). And say I want to set the class of the first span to ‘myclass’, how would I do that?

Vue.component('mycomponent', {
    props: ['a','b'],
    template: `<span>
     <span>{{a}}</span>
     <span>{{b}}</span>
     </span>
`
});

Obviously this is not going to do what I want

<mycomponent class='myclass' />

I could pass the class as a prop and make the template take it into account. But then what if I want to add an event handler like @click on the first span, directly from <mycomponent> ?

What’s the right coding pattern to do this generically?

if using v-if seems tedious and too verbose you just use render function instead of template

It is, class will be used on the components root element. You can also use the event binding as you’ve described, though you might need to use the native modifier for v-on.
Official documentation:


If you meant you want to bind it to the span showing the a prop, yes then you must use props and add the needed logic. Though, I would say that you rather should rethink how you structure your components in that case.