Vue Crawl Pit Road (v)--component advanced

Component (Component) is one of the most powerful features of Vue.js, and previous articles have just used the basic encapsulation functionality, this time to introduce some of the more powerful extensions.

First, basic usage

In a project created with VUE-CLI, it is very convenient to create a new. vue file, and then write the HTML code in <template>, and a simple component is completed.

A complete component, in addition to <template>, there are <script> and <style>

It is important to note that the data in the,<script> must be a function

Then in the other file JS inside the introduction and registration, you can directly use this component

Ii. Distributing content using slots

In the development process, it is often necessary to add new content within the subassembly, which allows one or more sockets to be left inside the subassembly <slot>

Then add the content when you call this subassembly

The added content will be distributed to the corresponding <slot>

<slot> can also act as a scope, define variables in subcomponents, and customize rendering in the parent component

In this example, <slot> is added to the subassembly first, and the array variable is defined in the subassembly navs

Then, in the parent component, in scope <template> add content, where scope is the intrinsic element and its value corresponds to a temporary variable props

And props will receive the parameters passed from the parent component to the child component Navs

Three, dynamic components

Vue can also attach multiple subcomponents to the same location, switch components with variables, and achieve the effect of the tab menu.

Such a feature can be implemented by routing Vue-router, but routing is more appropriate for larger components, and URLs can change accordingly

The <component> elements that Vue itself retains can dynamically bind components to the is feature, making it easy to switch between dynamic components

In the example above, when the value of Tabview changes,<component> the corresponding component is rendered, and the effect of the route is very similar, but the address bar has not changed

However, each switch component is re-rendered and the data on the component cannot be preserved. You can use keep-alive to keep components in memory and avoid re-rendering

Iv. Recursive components

When a component has a name attribute, it can recursively invoke itself within its template, which is very effective when developing a tree component

Above is a subcomponent, which defines name as SIMPLE03, and then calls itself in the template, combining v-for to implement recursion

To prevent a dead loop, the V-if is added as a criterion when invoking itself.

When called in the parent component, a tree needs to be passed through props:

Final Render Result: