Table of contents
A configuration item in the Vue instance (same level as data), same as in Vue.extend({ })
Global writing [Vue.component('component name', component)]
5. An important built-in relationship
1. Basic use
Three steps to use components in Vue:
1. Define components (create components)
2. Register the component [registered on a property component of the Vue instance]
3. Use components (write component tags)
1. How to define a component?
Created using Vue.extend(options) , where options are almost the same as the options passed in when new Vue(options), but there are some differences;
The difference is as follows:
1.el do not write, why? ———In the end, all components must be managed by a vm, and the el in the vm decides which container to serve.
2. data must be written as a function, why? ———— When components are reused, there is a reference relationship between data.
Remarks: Use template to configure component structure.
2. How to register components?
1. Partial registration: pass in the components option when relying on new Vue
2. Global registration: rely on Vue.component('component name', component)
3. Write component tags:
<school></school>
-
A configuration item in the Vue instance (same level as data), same as in Vue.extend({ })
This attribute is used, which is loaded into the bound Vue tag. The template attribute is used, and a root tag is needed to wrap the scattered sub-tags below.
Note: After use, the tag with class="demo" will completely replace the tag with id="root" and its content bound by Vue
template: `
<div class="demo">
<h2>学校名称：{
{schoolName}}</h2>
<h2>学校地址：{
{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,-
data use function
- The defect of the object type ( the address of the object is the same, and all the data will be changed once changed ) For example, only a in ss is changed in the following, but a in dd is also changed
- Functional (can be called repeatedly)
[Components need to be reused (not copy and paste) , that is, a component, you use it, one day, you use it in another place on the page and change it, then the data in the previous place may change]
data() { return { schoolName: '尚硅谷', address: '北京昌平' } },
-
Component usage
-
Global writing [ Vue.component('component name',component) ]
2. A few points for attention
A few notes:
1. About the component name:
A single word consists of :
The first way of writing (the first letter is lowercase): school
The second way of writing (capitalized first letter): School
Made up of multiple words :
The first way of writing (kebab-case naming): my-school
The second way of writing (CamelCase naming): MySchool (requires Vue scaffolding support)
Remark:
(1). The component name avoids the existing element names in HTML as much as possible, for example: h2 and H2 are not acceptable.
(2). You can use the name configuration item to specify the name of the component displayed in the developer tool.
2. About component tags:
The first way of writing: <school></school>
The second way of writing: <school/>
Note: When scaffolding is not used, <school/> will cause subsequent components to fail to render.
3. A shorthand way:
const school = Vue.extend(options) can be abbreviated as: const school = options (after the component is created, it will be parsed)
3. Nesting of components
Understand according to the direction of the arrow and the serial number in the figure
- A named attribute name of Vue.extend
- It can directly define the name of the component, and in the Vue developer tool, it is the name
4、Vuecomponent
About VueComponents:
1. The essence of the school component is a constructor named VueComponent, which is not defined by the programmer, but generated by Vue.extend .
2. We only need to write <school/> or <school></school>, and Vue will help us create an instance object of the school component when parsing .
That is, what Vue executes for us: new VueComponent(options).
3. Special attention: Every time Vue.extend is called, a brand new VueComponent is returned ! ! ! !
4. About this pointing to:
(1). In component configuration:
The this of the data function, the function in methods, the function in watch, and the function in computed are all [VueComponent instance objects].
(2). New Vue (options) configuration:
The this of the data function, the function in methods, the function in watch, and the function in computed are all [Vue instance objects].
5. The instance object of VueComponent, hereinafter referred to as vc (also called: component instance object).
The instance object of Vue, hereinafter referred to as vm.
5. An important built-in relationship
1. An important built-in relationship: VueComponent.prototype.__proto__ === Vue.prototype
2. Why there is this relationship: Let the component instance object (vc) have access to the properties and methods on the Vue prototype.
