Vue Learning Journey Part8: Vue global components and private components creation and component switching animation

1. Concept

What is a component:

The component is to split the repeated part of the complex page into small pieces that can be reused.
The emergence of the component splits the code amount of the Vue instance. What can be divided into different functional modules with different components
? Function call corresponding component

The difference between componentization and modularization:

• Modularity: It is divided from the perspective of code logic, which
  facilitates the layered development of code and ensures the single function of each functional module
• Componentization: Divided from the perspective of the UI interface
  Make the front-end page componentized and split the interface into small parts to facilitate the reuse of UI components

Simply put, componentization makes the content of repeated code on a webpage simpler. Multiple repeated codes only need one. The
page needs to be displayed a few times and then rendered a few times.

---

Second, create components

1. Create a global component

Global components are components that can be used by all Vue instances in the code

Creation method one:

Use Vue.extendto create a global Vue component to return the template object of the component
Syntax:

Vue.extend({
            template:"组件内容"
        })

And use Vue.componentthe register template object as a named component
syntax:

Vue.component("组件名称",Vue.extend创建的组件模板对象)

Example:

<script>
	// 使用Vue.extend来创建全局Vue组件 返回组件的模板对象
	var component1=Vue.extend({
	    template:"<h3>我是组件</h3>" // 通过template属性 指定组件要展示的HTML结构
	})
	
	// 使用Vue.component将模板对象注册为一个有名称的组件
	// Vue.component("组件名称",Vue.extend创建的组件模板对象)
	Vue.component("myComponent",component1)
	Vue.component("mycomponent",component1)
	
	var vm=new Vue({
	   el:'#app',
	   data:{},
	   methods:{}
	});
</script>

To use the component directly to the name of the component into the page in the form of HTML tags can

Note : Components can be used when registering camelCase but can not name a hump on the page
component name if it contains uppercase letters on the page shall be converted to uppercase letters and lowercase connection with the dash
capital if it contains a direct reference to the component name Just

<div id="app">
	<my-component></my-component>
	<mycomponent></mycomponent>
</div>

Combining these two steps into one step is:

Vue.component("myComponent",Vue.extend({
            template:"<h3>我是组件</h3>"
        }))

The first parameter of Vue.component is the name of the component. When referring to the component on the page,
the second parameter of Vue.component is the name. The second parameter is the component created by Vue.extend. The template attribute is the HTML content of the component.

---

Creation method two:

<script>
    Vue.component("myComponent",{
        template:"<h3>我是组件</h3>"
    })

    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{}
    });
</script>

It is worth noting: both the template properties of the component assembly created which way to point the contents of the template must have one and only one unique root element otherwise it will error

such as:

Vue.component("myComponent",{
            template:"<h3>我是组件</h3><span>111</span>"
        })

If you write
like this, you will get an error. You have to wrap it with a label like this:

Vue.component("myComponent",{
            template:"<div><h3>我是组件</h3><span>111</span></div>"
        })

After that, the reference method on the page is still the same, and
the component name can be introduced into the page.

<div id="app">
	<my-component></my-component>
</div>

---

Creation method three:

The advantage of this creation method is that there are code hints and highlights.
This method abstracts the template structure of the component

In this way, when writing component content in the template, you don't write HTML code directly but write an id:

<script>
    Vue.component("myComponent",{
        template:"#tmpl" // 指定模板内容的id 只能用id 不能用class
    })

    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{}
    });
</script>

Then use tags outside the<template> tags controlled by Vue to define the HTML template of
the component. All the code in this element belongs to the template code structure

<template id="tmpl">
    <!-- 同样要符合组件定义的规则 即：有且仅有唯一的根元素 -->
    <div>
        <div><h3>我是组件</h3><span>111</span></div>
    </div>
</template>

<div id="app">
    <!-- 将组件名称引入到页面中即可 -->
    <my-component></my-component>
</div>

---

2. Create private components

Global components can be used by all Vue instances
Private components can only be used by the Vue instance created

<script>
    var vm2=new Vue({
               el:'#app2',
               data:{},
               methods:{},
               components:{
                   // 定义实例内部的私有组件
                   login:{
                       template:"<h1>私有</h1>"
                   }
               }
            });
</script>

<div id="app2">
	<!-- 将组件名称引入到页面中即可 -->
	<login></login>
</div>

The HTML code of private components can also be extracted:

<script>
    var vm2=new Vue({
               el:'#app2',
               data:{},
               methods:{},
               components:{
                   // 定义实例内部的私有组件
                   login:{
                       template:"#tmpl2"
                   }
               }
            });
</script>

<template id="tmpl2">
    <h1>私有</h1>
</template>

<div id="app2">
    <!-- 将组件名称引入到页面中即可 -->
    <login></login>
</div>

---

Third, the data and methods in the component

You can also have your own data in the
component, but the data in the component cannot be an object. It must be a function and the return value is an object
. The data in the component is used in the same way as the data in the Vue instance.

<script>
    Vue.component("mycomponent",{
        // 组件中的data中的数据使用方式和在Vue实例中的data数据使用方式完全一致
        template:"<h1>全局组件 - {{msg}}</h1>",
        // 组件内可以有自己的data
        // 但组件中的data不能是一个对象 必须为一个function 且返回一个对象
        data:function()
        {
            return {
                msg:"component data"
            };
        }
    })

    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{}
    });
</script>

<div id="app">
    <mycomponent></mycomponent>
</div>

The reason why data must be defined as a function that returns an object is:
if multiple identical components are rendered repeatedly, it can be ensured that the data in each component is unique and not shared by other components

Methods are defined in the same way as data. You can write methods in the methods attribute in the component instance.

<script>
	Vue.component("counter",{
	            template:"#tmpl",
	            data:function()
	            {
	                return {count:0};
	            },
	            methods:{
	                increment()
	                {
	                    this.count++;
	                }
	            }
	        })
</script>

<template id=tmpl>
	<div>
		<input type="button" value="+1" @click="increment">
		<h3>{{count}}</h3>
	</div>
</template>

---

Four, component switching

There are two ways to switch components

1, v-if and v-else to achieve component switching

v-if represents the value of this parameter truewhen the component is in display state
v-else represents the value of this parameter falsewhen the component is in display state

It is also very simple to use:

<script>
    Vue.component("login",{
        template:"<h3>登录</h3>"
    })

    Vue.component("register",{
        template:"<h3>注册</h3>"
    })

    var vm=new Vue({
       el:'#app',
       data:{
           flag:true
       },
       methods:{}
    });
</script>

<div id="app">
    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>
</div>

But due to the disadvantages of if and else,
its flaw is that it can only control the switching between the two components

Vue also provides a way to control the switching between multiple components:

2. The component element implements component switching

Vue provides the <component>elements to show the name of the corresponding property
component is a placeholder :isattribute need to specify the name of the component you want to show
it simply: the value of the property is the name which is the component of which component is then displayed
component name must be in quotes Package to indicate that it is a string otherwise Vue will think it is an expression and parse it

<div id="app">
    <a href="" @click.prevent="componentName='login'">登录</a>
    <a href="" @click.prevent="componentName='register'">注册</a>
    <!-- Vue提供了component元素来展示对应名称的属性 -->
    <!-- :is属性需要指定要展示的组件的名称 -->
    <!-- 组件名称须用引号进行包裹 -->
    <component :is="componentName"></component>
</div>

<script>
    Vue.component("login",{
        template:"<h3>登录</h3>"
    })

    Vue.component("register",{
        template:"<h3>注册</h3>"
    })

    var vm=new Vue({
       el:'#app',
       data:{
           // :is绑定的组件名称
           componentName:'login'
       },
       methods:{}
    });
</script>

---

Five, component switching animation

When the component is switched, it can also achieve animation effects to enhance the user experience

First,<transition> wrap the component to
<transition>be animated with a label is a component provided by Vue. You can add entry / leave transitions to elements and components

Then use the modeattribute to set the animation mode of the component switch. Out-in represents first out and then enters in-out means first enters and then exits

<div id="app">
    <a href="" @click.prevent="componentName='login'">登录</a>
    <a href="" @click.prevent="componentName='register'">注册</a>

    <!-- 用transition标签进行包裹 -->
    <!-- 用mode属性设置组件切换的动画模式 out-in代表先出再进入 in-out代表先进入再出 -->
    <transition mode="out-in">
        <component :is="componentName"></component>
    </transition>
</div>

Finally, set the animation style:

<style>
    .v-enter,
    .v-leave-to
    {
        opacity:0;
        transform: translateX(150px);
    }

    .v-enter-active,
    .v-leave-active
    {
        transition: all 0.5s ease;
    }
</style>

---