The use of components:
1. Create component constructor 2. Register component 3. Use component
1. Call the Vue.extend () method to create the component constructor 2. Use the Vue.component () method to register the component 3. Use the component within the scope of the Vue instance
Code above:
const cpnC = Vue.extend({
template:`
<div>
<h2> I am the headline </ h2>
<p> I am content <p>
<p> I am also content <p>
</div>`
})
In this way, a component constructor is created. The one after the template is backticks. As mentioned earlier, this thing can be wrapped. The following is the content of the component. Then we register the component:
Vue.component('my-cpn',cpnC)
The name of the component is called my-cpn, and you can use it later:
<div id='app'>
<my-cpn></my-cpn>
</div>
effect:
Very simple and easy to use.
Global components and local components:
The global component registered in the above way means that it can be used in all vue instances. The code for local components is as follows:
const app = new View ({
el:"#app",
data(){
return{
}
},
components:{
cpn:cpnC
}
});
Set up the components in the instance to register (the content in the previous Vue.extend is also necessary, because you need to know what the components are). The meaning here is that the label of the component is cpn, and the content of the component is cpnC, which is the object whose content is written earlier. Where this is registered can only be used where. This is the local component.
Parent and child components:
The child component is a component registered in the parent component. We define two components:
const cpnC1 = Vue.extend({
template:`
<div>
<h2> I am title 1 </ h2>
<p> I am content 1 <p>
</div>`
})
const cpnC2 = Vue.extend({
template:`
<div>
<h2> I am title 2 </ h2>
<p> I am content 2 </ h2>
<cpn1></cpn1>
</div>
`,
components:{
cpn1:cpnC1
}
})
We found that cpnC1 is registered in cpnC2, and then we will carry cpnC1 when using cpnC2. It should be noted that the Vue instance itself is a root component, so you still need to use cpnC2 to register under the components.
Syntax sugar for registered components:
const cpnC = Vue.extend({
template:`
<div>
<h2> I am the headline </ h2>
<p> I am content <p>
<p> I am also content <p>
</div>`
})
Vue.component('my-cpn',cpnC)
This is the above wording, the syntactic sugar is to omit the part of the purchase:
Vue.component('my-cpn',{
template:`
<div>
<h2> I am the headline </ h2>
<p> I am content <p>
<p> I am also content <p>
</div>`
})
that's it. So how to write code can make the code more standardized, because if you write too much behind the template, it will be very messy. We can write one in the script tag and set the tag to an id:
<script type="text/x-template" id='cpn'>
<div>
<h2> I am the headline </ h2>
<p> I am content <p>
<p> I am also content <p>
</div>
</script>
type is defined as text / x-template type, the content of our template below is:
const cpnC = Vue.extend({
template:`#cpn`
})
This is much clearer.
In actual development, this is more commonly used, just use the template tag
<template id="cpn">
<div>
<h2> I am title 2 </ h2>
<p> I am content 2 </ p>
<p> I am also content 2 </ p>
</div>
</template>
It is simpler to use this type of writing.
Use the data function in the component to store data, and data () {return {xxx}} uninstalls all content after return. Why should it be written like this? Because if the data is directly stored in the data, all components share the same set of data, return returns an object, each component is allocated its own memory after creation, and each has its own set of data, so that every time you Using one of the components, only the data of this component changes, and the data of each component is independent of each other. If your design is to want everyone to share the same set of data, then the content of return in data should be an obj and then define const obj = {} to write the data here.
Communication between components:
The communication between components is usually the communication of parent and child components. Some child components do not directly send requests to the server. They store data in the parent component and then pass it to the child components. The parent component sends out the request uniformly.
First, the parent component is passed to the child component:
Parent component code:
const app = new View ({
el:"#app",
data:{
info:{
name:'why',
age:18,
height:11.88
}
},
components:{
cpn
}
})
Here the parent component is app, and I want to send the contents of info to the child component cpn to use. So the components were registered using components. The following is the definition code of the subcomponent:
const cpn={
template:'#cpn',
props:{
cInfo:{
type:Object,
default(){
return {}
}
}
}
}
Props are used to accept the passed value. The name of the component defined in the template is called cpn. Then we write the content of the component in the template tag:
<template id="cpn">
<h2>{{cInfo}}</h2>
</template>
The component prints the value passed from the parent component, saves the value in cInfo, and then we can use it
<div id='app'>
<cpn :c-info="info"></cpn>
</div>
Here we use the cpn component. In order to get the value of the passed cinfo, this component needs to be bound using v-bind: c-info = "info". The c-info is written here because Camelback is not Identified.