Vuejs family bucket series (VIII) --- components

Keywords: Vue

brief introduction

What is a component: a component is one of the most powerful features of Vue.js.

Components can extend HTML elements and encapsulate reusable code. At a higher level, components are custom elements for which the compiler of Vue.js adds special features. In some cases, components can also be in the form of native HTML elements, extended with the is feature.

Definition of components

Mode 1

Create the component builder first, and then create the component by the component builder

//1. Use Vue.extend() to create a component constructor
var MyComponent=Vue.extend({
    template:'<h3>Hello World</h3>'
});
//2. Use vue.component (tag name, component builder) to create components according to the component builder
Vue.component('hello',MyComponent);

Mode 2

Directly create components (recommended), which is actually a shorthand for mode 1

Vue.component('my-world',{
    template:'<h1>Hello, the world</h1>'
});

root component

var vm=new Vue({ //The vm here is also a component, called Root component
    el:'#app',
    data:{
        msg:'Panini'
    }
});

Type of component

Global components

Global component, which can be used in all vue instances

Vue.component('my-hello',{
    template:'<h3>{{name}}</h3>',
    data:function(){ //When storing data in a component, it must be in the form of a function that returns an object
        return {
            name:'alice'
        }
    }
});

Local components

Local component, which can only be used in the current vue instance

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reference template</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
        <my-hello></my-hello>
    </div>

<template id="wbs">
    <!-- <template>Must have and have only one root element -->
    <div>
        <h3>{{msg}}</h3>
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
    </div>
</template>

<script>
    var vm=new Vue({
        el:'#itany',
        components:{
            'my-hello':{
                name:'panini',  //Specifies the name of the component. The default is the label name. It can not be set
                template:'#wbs',
                data(){
                    return {
                        msg:'Panini's blog',
                        arr:['tom','jack','mike']
                    }
                }
            }

        }
    }); 
</script>
</body>
</html>

Dynamic components

Multiple components use the same mount point, and then dynamically switch between them
Take an application scenario: switching between login and registration pages

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic components</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <button @click="flag='my-hello'">display hello assembly</button>
        <button @click="flag='my-world'">display world assembly</button>
        <div>
            <keep-alive>
                <component :is="flag"></component>  
            </keep-alive>
        </div>
    </div>

    <script>
        var vm=new Vue({
            el:'#itany',
            data:{
                flag:'my-hello'
            },
            components:{
                'my-hello':{
                    template:'<h3>I am hello Components:{{x}}</h3>',
                    data(){
                        return {
                            x:Math.random()
                        }
                    }
                },
                'my-world':{
                    template:'<h3>I am world Components:{{y}}</h3>',
                    data(){
                        return {
                            y:Math.random()
                        }
                    }
                }
            }
        }); 
    </script>
</body>
</html>

keep-alive

Using keep alive component to cache inactive components can keep state and avoid re rendering. By default, inactive components will be destroyed and re created every time

Posted by AbydosGater on Thu, 30 Apr 2020 20:33:50 -0700

Programmer Group