Add content for components section

pull/1657/head
Kamran Ahmed 2 years ago
parent 5f6741c738
commit 3d5ecd6735
  1. 7
      content/roadmaps/105-vue/content/100-fundamental-topics/101-components/101-component-registration.md
  2. 10
      content/roadmaps/105-vue/content/100-fundamental-topics/101-components/102-props.md
  3. 7
      content/roadmaps/105-vue/content/100-fundamental-topics/101-components/103-events.md
  4. 8
      content/roadmaps/105-vue/content/100-fundamental-topics/101-components/104-attribute-inheritance.md

@ -1 +1,6 @@
# Component registration # Component Registration
A Vue component needs to be "registered" so that Vue knows where to locate its implementation when it is encountered in a template. There are two ways to register components: global and local.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/components/registration.html'>Component Registration</BadgeLink>

@ -1 +1,11 @@
# Props # Props
If we are building a blog, we will likely need a component representing a blog post. We want all the blog posts to share the same visual layout, but with different content. Such a 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.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/essentials/component-basics.html#passing-props'>Props Basics</BadgeLink>
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vuejs.org/guide/components/props.html'>Props in Depth</BadgeLink>

@ -1 +1,8 @@
# Events # Events
As we develop our applications we may need to communicate with the parent component in order to notify of some actions e.g. when a user clicks on a button. In order to do this we need to use events.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/essentials/component-basics.html#listening-to-events'>Listening to Events</BadgeLink>
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/events.html'>Events in Detail</BadgeLink>

@ -1 +1,7 @@
# Attribute inheritance # Attribute Inheritance
Attribute inheritance aka "fallthrough attributes" is a feature of Vue.js that allows you to inherit attributes from a parent component.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/attrs.html'>Fallthrough Attributes</BadgeLink>

Loading…
Cancel
Save