Component Vue

Posted on  by admin
  • You’re browsing the documentation for v2.x and earlier.
  • For v3.x, click here.
  • Here’s an example of a Vue component:.

Components are reusable Vue instances with a name: in this case, . We can use this component as a custom element inside a root Vue instance created with new Vue:.

The above is made possible by Vue’s element with the is special attribute:. In the example above, currentTabComponent can contain either:.


the name of a registered component, or.

a component’s options object. See this example to experiment with the full code, or this version 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.

That’s all you need to know about dynamic components 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 Dynamic & Async Components.

Some HTML elements, such as

      , and , and