1. Cognitive component
We divide a complete page into many components, each component is used to realize a function block of the page, and each component can be subdivided.
Componentization is an important idea in Vuejs. It provides an abstraction so that we can develop independent reusable small components to construct our applications. Any application will be abstracted into a component tree.
The application of component-based idea makes us split the page into small and reusable components as much as possible in development, which makes our code more convenient to organize and manage, and has stronger expansibility.
2. Basic steps for registering components
The use of components is divided into three steps:
1. Create component constructor
2. Register components
3. Using components
Basic usage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--3,Using components-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//1. Create component constructor object
const cpnC = Vue.extend({
template: `
<div>
<h2>I'm the title</h2>
<p>I am content 1</p>
<p>I am content 2</p>
</div>`
})
//2. Register components
Vue.component('my-cpn',cpnC)
const app = new Vue({
el: '#app'
})
</script>
</body>
</html>
Registration component step resolution
1,Vue.extend():
Call Vue Extend () creates a component constructor.
Usually, when creating a component constructor, the template passed in represents the template of our custom component. The template is the HTML code to be displayed where the component is used.
2,Vue.component():
Call Vue Component () is to register the component constructor as a component and label it with a component name.
Therefore, two parameters need to be passed:
1. Register the tag name of the component. 2. Component constructor.
3. The component must be mounted under a Vue instance, otherwise it will not take effect.
Global and local components
The above code case is global component, so what are global component and local component?
Global components can be used in any vue managed container, but local components can only be used in the specified managed container.
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//1. Create a component constructor
const cpnC = Vue.extend({
template: `
<div>
<h2>I'm the title</h2>
<p>I am the content</p>
</div>
`
})
//2. Register component (global component, which means it can be used under multiple Vue instances)
// Vue.component('cpn',cpnC)
const app = new Vue({
el: '#app',
})
const app2 = new Vue({
el: '#app2',
//Local component
components: {
cpn: cpnC
}
})
</script>
</body>
Local components are directly mounted under the specified vue.
Register component syntax sugar
The above method of registering components may be cumbersome. Vue provides syntax sugar for registration in order to simplify the process, mainly eliminating the need to call Vue Instead, you can directly use an object to replace it.
components: {
cpn1: {
template: `
<div>
<h2>Title 1</h2>
<p>Content 1</p>
</div> `
}
}
3. Parent and child components
There are hierarchical relationships between components, and the most important relationship is the relationship between parent and child components
<script>
//1. Create the first component constructor
const cpnC1 = Vue.extend({
template: `
<div>
<h2>Title 1</h2>
<p>Content 1</p>
</div>
`
})
//1. Create a second component constructor
const cpnC2 = Vue.extend({
template: `
<div>
<h2>Title 2</h2>
<p>Content 2</p>
<cpn1></cpn1>
</div>
`,
components: {
cpn1: cpnC1
}
})
const app = new Vue({
el: '#app',
data: {
message: 'How do you do',
},
components: {
cpn2: cpnC2
}
})
</script>
Among them, cpnC2 is the parent component of cpnC1, and the child components are registered in the parent component.
Components cannot directly access data in Vue instances
Component is the encapsulation of a separate function module. This module has its own HTML module and its own data.
The component object also has a data attribute (or methods and other attributes), but the data attribute must be a function, and the function returns an object, which stores data.
4. Parent child component communication
Child components cannot reference the data of parent components or Vue instances. However, during development, some data often needs to be transferred from the upper layer to the lower layer:
For example, in a page, we request a lot of data from the server. Some of the data is not displayed by the large components of our whole page, but by the following sub components. At this time, the sub component will not send a network request again, but directly let the parent component pass the data to the sub component.
How to communicate between parent and child components? Vue officials mentioned:
1. Pass data to subcomponents through props
2. Send messages to parent components through events
Pass from parent to child
In the component, use the option props to declare the data to be received from the parent.
There are two ways to the value of props:
Method 1: string array. The string in the array is the name when passing.
Method 2: object. The object can set the type during transmission, or set the default value, etc.
When you need to verify the type of props, you need object writing.
All validations support the following data types:
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
Pass from child to parent
When the child component needs to transfer data to the parent component, it needs to use custom events. The v-on learned before can be used not only to listen for DOM events, but also for custom events between components.
Custom event flow:
- In the subcomponent, $emit() is used to trigger the event
- In the parent component, listen for child component events through v-on
Access method of parent-child components: $children
Sometimes we need the parent component to directly access the child component, the child component to directly access the parent component, or the child component to access the root component.
- Parent component accessing child component: use $children
- Parent component accessing child components: use $refs
- Child component accessing parent component: use $parent
Parent access child
$children use:
<body>
<div id="app">
<cpn></cpn>
<button @click="btnClick">Button</button>
</div>
<template id="cpn">
<div>I'm a subcomponent</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'How do you do',
},
methods: {
btnClick() {
console.log(this.$children);
this.$children[0].showMessage();
}
},
components: {
cpn: {
template: '#cpn',
methods: {
showMessage() {
console.log('showMessage');
}
}
}
}
})
</script>
</body>
$refs use:
<body>
<div id="app">
<cpn></cpn>
<cpn ref="aaa"></cpn>
<button @click="btnClick">Button</button>
</div>
<template id="cpn">
<div>I'm a subcomponent</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'How do you do',
},
methods: {
btnClick() {
console.log(this.$refs.aaa.name);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: 'I'm a subcomponent name'
}
},
methods: {
showMessage() {
console.log('showMessage');
}
}
}
}
})
</script>
</body>
$refs is an object type. By default, it is an empty object
Child access parent
$parent usage:
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>I am cpn assembly</h2>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<h2>I'm a subcomponent</h2>
<button @click="btnClick">Button</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'How do you do',
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: 'I am cpn Component name'
}
},
components: {
ccpn: {
template: '#ccpn',
methods: {
btnClick() {
console.log(this.$parent);
console.log(this.$parent.name);
}
}
}
}
},
}
})
</script>
</body>
$root uses:
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>I am cpn assembly</h2>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<h2>I'm a subcomponent</h2>
<button @click="btnClick">Button</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'How do you do',
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: 'I am cpn Component name'
}
},
components: {
ccpn: {
template: '#ccpn',
methods: {
btnClick() {
console.log(this.$root);
console.log(this.$root.message);
}
}
}
}
},
}
})
</script>
</body>