Home Web Front-end JS Tutorial Detailed explanation of the use of vue components

Detailed explanation of the use of vue components

May 14, 2018 am 10:52 AM
use components Detailed explanation

This time I will bring you a detailed explanation of the use of vue components, and a detailed explanation of the precautions for the use of vue components. The following is a practical case, let's take a look.

Component (Component) is a simple encapsulation of data and methods. The component in the web can actually be regarded as a component of the page. It is an interface with independent logic and functions. At the same time, it can be integrated with each other according to the specified interface rules, and finally becomes a complete application. The page is composed of a It is composed of similar components, such as navigation, list, pop-up window, drop-down menu, etc. The page is just a container for such components. The components are freely combined to form a fully functional interface. When a component is not needed or you want to replace it, you can replace and delete it at any time without affecting the operation of the entire application. , The core idea of ​​front-end componentization is to split a huge and complex thing into small things with reasonable granularity.

Use to improve development efficiency, facilitate reuse, simplify debugging steps, improve the maintainability of the entire project, and facilitate collaborative development.

As a lightweight front-end framework, vue’s core is component development.

Components can extend HTML elements and encapsulate reusable code. At a high level, a component is a custom element to which Vue.js's compiler adds special functionality. In some cases, components can also appear as native HTML elements extended with the is attribute.

In vue, components are reusable Vue instances. Because components are reusable Vue instances, they receive the same options as new Vue, such as data, computed, watch, methods, and lifecyclehooks. The only exceptions are root-instance-specific options like el.

Component registration

Global registration

Create components through Vue.component:

 Vue.component('my-component-name', {
 // ... 选项 ...
 })
Copy after login

These Components are registered globally. That is to say, they can be used in the template of any newly created Vue root instance (new Vue) after registration. For example:

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<p id="app">
 <component-a></component-a>
 <component-b></component-b>
 <component-c></component-c>
</p>
Copy after login

The same is true in all sub-components, which means that these three components can also use each other internally.

Local registration

Global registration is often not ideal. For example, if you use a build system like webpack, registering all components globally means that even if you no longer use a component, it will still be included in your final build result. This results in an unnecessary increase in the amount of JavaScript downloaded by users.

In these cases, you can define the component via a plain JavaScript object:

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
Copy after login

Then define the component you want to use in the components options:

new Vue({
 el: '#app'
 components: {
 'component-a': ComponentA,
 'component-b': ComponentB
 }
})
Copy after login

For each attribute in the components object, its attribute name is the name of the custom element, and its attribute value is the option object of this component.
Note that locally registered components are not available in their child components. For example, if you want ComponentA to be available in ComponentB, you need to write like this:

var ComponentA = { /* ... */ }
var ComponentB = {
 components: {
 'component-a': ComponentA
 },
 // ...
}
Copy after login

Use registered components in Babel and webpack

import ComponentA from './ComponentA.vue'
export default {
 components: {
 ComponentA
 },
 // ...
}
Copy after login

Note that in ES2015, Putting a variable name similar to ComponentA in the object is actually ComponentA: the abbreviation of ComponentA, that is, the variable name is also:

The name of the custom element used in the template
Contains the option of this component Variable name

Automated global registration of basic components

I don’t understand.

data must be a function

data: {
 count: 0
}
Copy after login

The variables in the data defined in this way are global variables. When using components, modifying the value of the variable in one component will affect the value in all components. The value of the variable. To avoid variable interference, a component's data option must be a function, so each instance can maintain an independent copy of the returned object:

data: function () {
 return {
 count: 0
 }
}
Copy after login

Dynamic components

It is very useful to dynamically switch between different components, such as in a multi-tab interface:

##The above content can be passed through Vue's <component> element Add a special is attribute to achieve this:

&lt;!-- 组件会在 `currentTabComponent` 改变时改变 --&gt;
&lt;component v-bind:is=&quot;currentTabComponent&quot;&gt;&lt;/component&gt;
Copy after login

你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

&lt;!-- 失活的组件将会被缓存!--&gt;
&lt;keep-alive&gt;
 &lt;component v-bind:is=&quot;currentTabComponent&quot;&gt;&lt;/component&gt;
&lt;/keep-alive&gt;
Copy after login

可以在这里查看动态组件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/

dom标签内使用组件

有些 HTML 元素,诸如 <ul>、<ol>、<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:

&lt;table&gt;
 &lt;blog-post-row&gt;&lt;/blog-post-row&gt;
&lt;/table&gt;
Copy after login

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法:

&lt;table&gt;
 &lt;tr is=&quot;blog-post-row&quot;&gt;&lt;/tr&gt;
&lt;/table&gt;
Copy after login

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS做出哈希表功能

Vue父子组件数据传递方法总结(附代码)

The above is the detailed content of Detailed explanation of the use of vue components. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What software is crystaldiskmark? -How to use crystaldiskmark? What software is crystaldiskmark? -How to use crystaldiskmark? Mar 18, 2024 pm 02:58 PM

What software is crystaldiskmark? -How to use crystaldiskmark?

Detailed explanation of obtaining administrator rights in Win11 Detailed explanation of obtaining administrator rights in Win11 Mar 08, 2024 pm 03:06 PM

Detailed explanation of obtaining administrator rights in Win11

How to download foobar2000? -How to use foobar2000 How to download foobar2000? -How to use foobar2000 Mar 18, 2024 am 10:58 AM

How to download foobar2000? -How to use foobar2000

How to use Baidu Netdisk app How to use Baidu Netdisk app Mar 27, 2024 pm 06:46 PM

How to use Baidu Netdisk app

How to use NetEase Mailbox Master How to use NetEase Mailbox Master Mar 27, 2024 pm 05:32 PM

How to use NetEase Mailbox Master

Detailed explanation of division operation in Oracle SQL Detailed explanation of division operation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detailed explanation of division operation in Oracle SQL

Teach you how to use the new advanced features of iOS 17.4 'Stolen Device Protection' Teach you how to use the new advanced features of iOS 17.4 'Stolen Device Protection' Mar 10, 2024 pm 04:34 PM

Teach you how to use the new advanced features of iOS 17.4 'Stolen Device Protection'

BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange? BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange? Apr 26, 2024 am 09:40 AM

BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange?

See all articles