[Vue five minutes] Five minutes let you understand vue components

Table of contents

foreword

1. Global Components

1. Definition

2. Global component call

2. Local components

1. Definition

2. Local component call

foreword

Why did vue become popular and practical a few years ago? This is mainly because one of the most powerful functions of Vue is the components of Vue. What are the powerful functions of Vue components? There are two reasons, one is the high reusability of components; the other is to reduce repetitive development.

What are components? A component is a complex and reusable code unit composed of basic elements, which is equivalent to a piece of express mail. These reused codes can be encapsulated to form a component that can be called when needed.

1. Global Components

1. Definition

The syntax of the global component is: vue.component('component name', {configuration options});

Then, let's further understand how the component name should be defined: the definition rule for component names is to separate the names with dashes, lowercase letters and also require a hyphen. Configuration options object: The object of the created configuration option and the instance of the configuration created by new Vue receive the same option object. These object properties include: data, computed, methods, etc.

A group price can predefine many options, the core is the following two

structure template

This template declares the mapping between the data and the DOM that is ultimately displayed to the user. But it should be noted that in this structure template, there can only be one root node.

initial data

data can define the initial data of the component, which is different from the definition of the data option of newVue. The component can be reused, so the data should be defined as a private transition state, the data should be defined as a function, and a function object should be returned.

2. Global component call

After talking about so many theoretical things, you may not understand, then let's code. Global components can be called globally, and the calling method is the same as the label calling method. You only need to change the label name to the component name.

Code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件</title>
</head>
<body>
    <div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
    </div>

    <div id="app1">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
Vue.component('button-counter',{
   template:`<button v-on:click="add">您在这里按下了{
   
   {count}}次！</button>`,
   data:function(){
    return{
        count:0
    }
   },
   methods:{
    add:function(){
        this.count++
    },
   }
});
var  vml = new Vue({
    el:"#app",
})
var vm2 =new Vue({
    el:"#app1",
})
    </script>
</body>

</html>

operation result:

In this code, button-counter is already a global component, which can be mounted and used on vm1 and vm2, and can be used within its scope. After the component is defined, it can be used from multiple slaves. The components are used twice in the mount range of the vue instance vm1 and vm2, and the data between the components is independent of each other. No matter which button is not pressed, they are not affected by each other. of.

2. Local components

1. Definition

The definition of a local component is: the definition on the vue instance, the definition on which instance is used in the area where the instance is mounted.

Using the configuration item component, one instance can configure multiple components, and multiple components are configured in one object. A local component is only used in the area defined in its instance mount, and the method invoked is exactly the same as the method invoked by the global component.

2. Local component call

Code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>组件</title>
</head>
<body>
    <div id="app">
        <!-- 头部，你随意定，你写中文拼音都可以 -->
<top></top>
<!-- 中部 -->
<middle></middle>
<!-- 尾部 -->
<bottom></bottom>
    </div>

    <div id="app1">
        <top></top>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>

var  vml = new Vue({
    el:"#app",
    components:{
        "top":{
            template:`<div>
                <h3>头部标题</h3>
                <p>12121212</p>
                </div>`
        },
        "middle":{
            template:`<div>
                <h3>中部题目</h3>
                <p>10086</p>
                </div>`
        }, 
        "bottom":{
            template:`<div>
                <h3>尾部题目</h3>
                <p>欢迎来到丘比特的博客</p>
                <p>QQ:2237814512</p>
                </div>`
        },
    }
})
var vm2 =new Vue({
    el:"#app1",
})
    </script>
</body>

</html>

operation result:

In the example, we define three components of the head, middle and tail. These three components can be used in the #app area mounted by vm1, but not in #app1. We can see that the three components called in the #app area mounted by vm1 can be displayed, but the top component called in the #app1 area mounted by vm2 is not rendered. When we open the console, we can see the error, in the element element The interpreted code can be seen.