diff --git a/client/src/pages/guide/english/vue/components/index.md b/client/src/pages/guide/english/vue/components/index.md index 4122375940..d05f2e875e 100644 --- a/client/src/pages/guide/english/vue/components/index.md +++ b/client/src/pages/guide/english/vue/components/index.md @@ -66,3 +66,21 @@ as we setted `iconSrc` or `featureTitle` as they were valid attributes. And the purpose of Vue.js components is this: increment your toolbox with your own tools. +### Props + +Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. To pass a title to our blog post component, we can include it in the list of props this component accepts, using a props option: + +```js +Vue.component('feature-card', { + props: ['title'], + template: '

{{ title }}

' +}) +``` +A component can have as many props as you’d like and by default, any value can be passed to any prop. In the template above, you’ll see that we can access this value on the component instance, just like with data. + +Once a prop is registered, you can pass data to it as a custom attribute, like this: +```html + + + +```