Why do we need component development?
Sometimes the amount of page code is too large, the logic is too much, or the same functional component is used in many pages, which is quite complicated to maintain. At this time, component development is required for functional splitting and component encapsulation, which has reached component universality. , Enhance the readability of the code and greatly reduce the maintenance cost.
Componentization greatly reduces the coupling of each function of the system, and improves the cohesion within the function. This has great benefits for front-end engineering and reducing code maintenance. The reduction of coupling improves the scalability of the system, reduces the complexity of development, improves development efficiency, and reduces development costs.
What are the characteristics of the components?
- Specificity A component only focuses on doing one thing, and do it well.
- Configurability A component needs to be clear about its input and output. The most basic way to be configurable is to pass the configuration value to the component through attributes, and during the life cycle of component initialization, through reading attributes Make the corresponding display modification for the value of. There are also some ways to pass valid values to the function by calling the function exposed by the component; modify the global
CSS style; pass a specific event to the component, and listen to the event in the component to execute the function.- Standardization Any component should comply with a set of standards, so that developers in different regions can develop a set of standardized components based on this standard.
- Reusability Any component should be an independent individual that can be used in different scenarios.
In Vue, component development is the core pillar and feature. Vue provides local and global components for use.
Today we talk about the creation and use of partial components .
<div id="app">
<App></App>
</div>
<script>
// 注意：在组件中这个data必须是一个函数,返回一个对象
const App = {
data(){
return {
msg:'我是App组件'
}
},
template:`
<div>
<h3>{
{msg}}</h3>
<button @click='handleClick'>按钮</button>
</div>
`,
methods: {
handleClick(){
this.msg = '我被改变了'
}
}
}
new Vue({
el:'#app',
data:{
},
components: {
// 挂载子组件
App
}
});
</script>
The creation of local components is in the form of const component name = {} .
The code format inside {} is very similar to the one in creating a Vue instance .
But it should be noted that when we create a Vue instance, the data in the instance is in the format of data:{ }, but the data in the component must be a function that returns an object, data(){ return{} }. The other properties are basically the same as those in the Vue instance.
The most important thing is this template attribute . We can put the html content that needs to be encapsulated here. In the example, I wrote an h3 tag and a button tag, and bound the click event to the button, and we still write the content of the event To the methods.
This completes the packaging of a basic component.
We have already encapsulated the components , the next thing to do is to mount , mount the encapsulated component to the Vue instance we need , components are the attributes of the mounted component in the instance, and the name of the component must be the same as when it was created. , The App I wrote in the example.
So far we have completed the packaging and mounting of the components, and then we are going to use it. The way to use is very simple, just like when we use other components, <component name></component name> .
Then let's take a look at the effect:
in the div of the page, we only wrote an App tag, but the h3 tag and button tag are rendered on the page. We do it through custom components . This is the meaning of components.
Then we click the button, because when we encapsulated the component, we also wrote the content of the click event to see if it worked.
no problem.
In this way, we have completed the packaging, mounting and use of partial components.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
