Revise component-basics.md #740
Conversation
| @@ -398,7 +396,7 @@ In the example above, `currentTabComponent` can contain either: | |||
|
|
|||
| See [this sandbox](https://codepen.io/team/Vue/pen/oNXaoKy) to experiment with the full code, or [this version](https://codepen.io/team/Vue/pen/oNXapXM) for an example binding to a component's options object, instead of its registered name. | |||
|
|
|||
| Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes **will be bound as DOM attributes**. For some properties such as `value` to work as you would expect, you will need to bind them using the [`.prop` modifier](../api/directives.html#v-bind). | |||
| You can also use the `is` attribute to create regular HTML elements. | |||
There was a problem hiding this comment.
Most of this paragraph is no longer true in Vue 3, so I've removed it. The lone remaining sentence feels a bit out of place but it is an important point that I didn't want to lose.
|
|
||
| That's all you need to know about registration for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Component Registration](component-registration.md). | ||
|
|
||
| ## Passing Data to Child Components with Props | ||
|
|
||
| Earlier, we mentioned creating a component for blog posts. The problem is, that component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in. | ||
|
|
||
| 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: | ||
| Props are custom attributes you can register on a component. To pass a title to our blog post component, we can include it in the list of props this component accepts, using the `props` option: |
There was a problem hiding this comment.
Despite appearances, I haven't removed the middle sentence entirely, I've just moved it to after the example. The 5 sentences that appeared directly before and after this example are all still present but I've moved them around and reworded one of them. I think they form more natural paragraphs this way.
| @@ -40,7 +40,7 @@ app.mount('#components-demo') | |||
|
|
|||
| <common-codepen-snippet title="Component basics" slug="abORVEJ" tab="js,result" :preview="false" /> | |||
|
|
|||
| Since components are reusable instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. The only exceptions are a few root-specific options like `el`. | |||
| Since components are reusable instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. | |||
There was a problem hiding this comment.
I don't believe the final sentence is true in Vue 3 so I've removed it.
There was a problem hiding this comment.
@skirtles-code awesome refactoring! I've added one non-blocking nitpick but the rest looks good to me 👍🏻
|
Thanks. Always grateful for the scrutiny. I'd be happy to wait until next week if you want to let the weekend contributors have their opportunity. |
|
@skirtles-code seems there are no objections so let's merge it 🎉 |
* docs: revise component-basics.md * docs: reword a sentence to avoid repeating 'component instance'
I've revised
component-basics.md. In a few places there were descriptions of Vue 2 functionality that no longer apply with Vue 3. I've also tweaked grammar and wording in various places.I've made inline comments for the most significant changes.
There are two things I've removed in multiple places: