Using this strategy we can go ahead and create the other two sub components SurveyInputSelect and SurveyInputRadio with their own props and markup. SurveyInputBase.vue Bring it all together We somehow need to insert the markup for the different inputs inside the template.We somehow need to copy the props from this component to any extending component.We could add more common options, but let's stick with just one for this simple example. The question prop is going to be common across each component.So I think this is a great use case for extending components! Base componentĮach of the sub components will inherit from a single file component called SurveyInputBase.
However, these components will have a lot in common:Įtc. vs ) and each needs its own props, methods, etc., as well. It makes sense that each question/input is a different component because each needs its own markup (e.g. I've named them to correspond to the above: You'll notice that each question has a different associated input type:Ī good architecture would be to make each question/input type into a different, reusable component. Here is a simple survey made with Vue.js: Note: this article was originally posted here on the Vue.js Developers blog on 2. Vue provides some functionality to help with component inheritance, but you'll also have to add some of your own ingenuity.
Vuejs pug template code#
Such an architecture would help you apply the DRY principle in your code (Don't Repeat Youself) which can make your code more readable and reduce the possibility of bugs. It'd be a good idea to create a base component with the common options and markup, and then extend the base component to create sub components. Do you have components in your Vue app that share similar options, or even template markup?