{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/transparent-vue-wrapper-components","result":{"data":{"allGhostPost":{"edges":[{"node":{"title":"Transparent Vue Wrapper Components","html":"
Lifted from 7 Secret Patterns Vue Consultants Don’t Want You to Know - Chris Fritz
\nComponent Definition
\nBaseInput.vue
<template>\n <label>\n {{ label }}\n <input\n v-bind="$attrs"\n :value="value"\n v-on="listeners"\n >\n </label>\n</template>\n
\nUsage
\n<BaseInput\n placeholder="What's your name"\n @focus="doSomething"\n/>\n
\nThis will bind all attributes and event listeners set on the component to the <input>
element.