What does vue.js componentization mean?

vue.js componentization is used to divide the UI page into several components for combination and nesting; componentization is an efficient way to deal with complex application systems and better clarify the role of functional modules; the purpose is In order to decouple, complex systems are split into multiple components, and component boundaries and responsibilities are separated to facilitate independent upgrades and maintenance.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6, Dell G3 computer.

Recommended: "vue Tutorial"

Vue is a progressive framework for building user interfaces. It has the following characteristics:

Progressive framework, using bottom-up incremental development design

Template two-way binding mechanism

Use directives to encapsulate DOM

Component design idea

Vue's componentization divides the UI page into several components for combination and nesting.

Vue componentization

Componentization is an efficient way to handle complex application systems and better clarify the role of functional modules. The purpose is: to decouple, split complex systems into multiple components, separate component boundaries and responsibilities, and facilitate independent upgrades and maintenance.

We all know the benefits of componentization without going into details. Components are one of the most powerful functions of Vue.js. Let us use independent and reusable small components to build large-scale applications and improve development efficiency. Faster and more agile.

For better reuse, here we take creating a pop-up component as an example to talk about how to build a component library for a project.

Vue component standardization

Without rules, it is difficult to achieve success.

To build a good component library, you should set some general rules at the beginning.

1. Naming

The naming of components should have nothing to do with the business, but should be named according to the functions implemented by the components. At the same time, it should also be distinguished from business file naming, and some unique prefixes can be added. For example, here, "UI" is added to the prefix of all components, and the pop-up component is named "UIDialog".

2. Implementation

Reusable components should implement common functions, and what they implement should be:

UI display

with users Interaction (event)

Animation effect

Reusable components should minimize dependence on external conditions. It is best not to split an independent functional component into several small components to implement.

3. Understand component properties and events

In Vue components, states are called props, events are called events, and fragments are called slots.

props allows the external environment to pass data to components.

Declare your own properties through props. It can be understood through the dialog/index.vue code above. Its type is: String, Number, Boolean, Array, Object, Date, Function, Symbol.

events allows components to trigger side effects from the external environment.

You can use v-on to listen to Dom events. Syntax: v-on: event type = "event processing function name". The abbreviation is: @event type = "event processing function name".

An intuitive example is:

<ulid="app">
<liv-on:click="clickMe">单击事件</li>
</ul>
<script>
var app = new Vue({
el : &#39;#app&#39;,
data : {
},
methods : {
clickMe : function(){
console.log(&#39;单击事件发生&#39;);
}
}
})
</script>

slot allows the external environment to combine additional content in the component.

slot is equivalent to setting a place in the subcomponent. When it is called and something is placed between its opening and closing tags, it will put these things in the slot. Through slot, when we call the component, we can change the actual content of the component as needed.

For example, child component template:

<div>
<h2 id="我是子组件的标题">我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>

Parent component template:

<div>
<h1 id="我是父组件的标题">我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
</my-component>
</div>

Rendering result:

<div>
<h1 id="我是父组件的标题">我是父组件的标题</h1>
<div>
<h2 id="我是子组件的标题">我是子组件的标题</h2>
<p>这是一些初始内容</p>
</div>
</div>

The above is the detailed content of What does vue.js componentization mean?. For more information, please follow other related articles on the PHP Chinese website!