Vue component basics

This article summarizes the relevant knowledge points and code examples of the basics of vue components. Friends in need can learn and refer to it.

What is a component

A 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, lists, pop-up windows, drop-down menus, 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 a component, 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 lifecycle hooks. The only exceptions are root-instance-specific options like el.

Component registration

##Global registration

Create components through Vue.component:

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

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>

The same is true for 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 = { /* ... */ }

Then define the component you want in the components options Component to be used:

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

For each attribute in the components object, its attribute name is the name of the custom element, and its attribute value is this The component's options object.

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:

var ComponentA = { /* ... */ }

var ComponentB = {
 components: {
 'component-a': ComponentA
 },
 // ...
}

Registered components using Babel and webpack

import ComponentA from './ComponentA.vue'

export default {
 components: {
 ComponentA
 },
 // ...
}

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

The name of the custom element used in the template

The variable name that contains the option of this component

Automated global registration of basic components

I don’t understand .

data must be a function

data: {
 count: 0
}

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

data: function () {
 return {
 count: 0
 }
}

Dynamic components

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

The above content can be achieved by adding a special is attribute to Vue's 8c05085041e56efcb85463966dd1cb7e element:

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

You will notice that if you If you select an article, switch to the Archive tab, and then switch back to Posts, the article you selected previously will not continue to be displayed. This is because Vue creates a new currentTabComponent instance every time you switch to a new tab.

Recreating the behavior of dynamic components is often very useful, but in this case, we prefer that the component instances of those tags be cached when they are first created. To solve this problem, we can wrap its dynamic component with a 7c9485ff8c3cba5ae9343ed63c2dc3f7 element.

<!-- 失活的组件将会被缓存！-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

You can view dynamic component examples here. https://jsfiddle.net/chrisvfritz/Lp20op9o/

dom标签内使用组件

有些 HTML 元素，诸如 ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、f5d188ed2c074f8b944552db028f98a1 和 221f08282418e2996498697df914ce4e，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 25edfb22a4f469ecb59f1190150159c6、a34de1251f0d9fe1e645927f19a896e8 和 5a07473c87748fb1bf73f23d45547ab8，只能出现在其它某些特定的元素内部。

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

<table>
 <blog-post-row></blog-post-row>
</table>

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

<table>
 <tr is="blog-post-row"></tr>
</table>

相关推荐：

vue组件中slot插口使用详解

vue组件写法规范

vue组件与复用使用详解

The above is the detailed content of Vue component basics. For more information, please follow other related articles on the PHP Chinese website!