组件

vue核心：数据驱动，组件化
组件化：单页面应用/单页面编程
现在就来了解一下组件，组件分为全局组件和私有组件
组件就是页面中的每一个部分

全局组件

使用vue.component创建组件

        Vue.component("组件名", {
            template:`<div @事件>创建组件的内容，必须要有一个标签包起来</div>`,
            data(){
                return{

                }
            },
            methods:{
                
            }
        })

私有组件

        let myTip2 = {
            template:`
            <div>{{name2}}这是私有组件
                <hr>
                <my-tip3></my-tip3>
                </div>
            `,
            data(){
                return{
                    name2:"再看！"
                }
            },
        }
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {

            },
            // 私有组件
            components:{
                myTip2
            }
        });

在vue实例中，使用components以对象的形式，将外部声明的组件引入，键值相同时，可以直接写键

1. template中放的就是每一个模块的代码，但是要注意必须要有一个根标签将它们都包在里面，在这个组件中，也可以使用事件，也可以使用组件中的变量。
2. 使用组件：<组件名></组件名>
3. 如果组件名是驼峰式，例如aB，在使用时
4. 组件里还可以嵌套组件，同样的形式写在子组件中就可以了

动态组件

html代码

<div id="app">
    <button @click="tipname='tip1'">组件1</button>
    <button @click="tipname='tip2'">组件2</button>
    <button @click="tipname='tip3'">组件3</button>
    <!-- 不要使用驼峰命名 -->
    <component :is="tipname"></component>    
</div>
<template id="tip1">
    <div>
        组件1 {{name}}
    </div>
</template>
<template id="tip2">
    <div>
        组件2
    </div>
</template>
<template id="tip3">
    <div>
        组件3
    </div>
</template>

js代码

let tip1 = {
            template: `#tip1`,
            data() {
                return {
                    name: "123"
                }
            }
        }
        let tip2 = {
            template: `#tip2`
        }
        let tip3 = {
            template: `#tip3`
        }
        new Vue({
            el: '#app',
            data() {
                return {
                    tipname:"tip1"
                }
            },
            methods: {

            },
            components:{
                tip1,tip2,tip3
            }
        });

从案例中我们还可以学到一个创建组件的方法，在html中通过template标签进行创建，然后在js中进行引入#id名即可 在

标签中，使用 ，作为存放组件的容器 在vue实例中，在data中return变量名："组件名"，就可以控制让哪一个组件显示出来