From f989c28c52c200ea3c60ab84baeb48d8aba389ee Mon Sep 17 00:00:00 2001 From: Filippo Nardi Date: Tue, 16 Oct 2018 17:06:35 +0200 Subject: [PATCH] added changes for props (#19489) --- .../guide/english/vue/components/index.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) 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 + + + +```