Vue基础知识(四) : 组件

一 丶组件

(1) 组件的概念 : 组件是Vue中公共的模块,可以在不同页面进行重复利用,提高代码的复用率

(2) 组件的声明 :

组件可以分为 全局组件 和 局部组件

全局组件的声明 : 全局组件声明在Vue实例之前,在所有Vue实例挂载的区域内都能使用

    Vue.component("MyName", {
            template: "<h2>全局组件</h2>",
            data() {
                return {
                    name: "张三"
                }
            },
            methods:{},
            watch :{}
        })

局部组件的声明 : 局部组件只能在该实例所挂载的区域内使用

    const vm = new Vue({
            el: "#app",
            data: {},
            components: {
                "MyComponent": {
                    template: "<p>局部组件</p>",
                    data() {
                        return {
                            name: "李四"
                        }
                    }
                }
            }
        })

这样书写方式会使Vue实例中的代码显得冗余,可以先在实例外面用变量接收,再添加到Vue实例中

    let ZhName = {
            template: "<a :href='info.link'>实例中的局部组件</a>",
            data() {
                return {
                    info: {
                        link: "https://www.baidu.com"
                    }
                }
            }
        }
        const vm = new Vue({
            el: "#app",
            data: {},
            components: {
                ZhName
            }
        })

我们可以看到组件的书写内容与Vue实例书写十分相似,但其中的data数据不是直接书写data对象里面,而是通过data函数中return返回一个对象来存储数据

二 丶组件的使用

下面演示组件的使用 : 

    <div id="app">
        <My-name></My-name>
        <You-name></You-name>
    </div>
    <script>
        // 全局组件的定义
        Vue.component("MyName", {
            template: "全局组件,名字为{{name}}</h2>",
            data() {
                return {
                    name: "MyName"
                }
            }
        })
        // 局部组件的定义
        const vm = new Vue({
            el: "#app",
            data: {},
            components: {
                "YouName": {
                    template: "<p>局部组件,名字为{{ name }}</p>",
                    data() {
                        return {
                            name: "YouName"
                        }
                    }
                }
            }
        })

组件的命名 :

组件命名时需要写成驼峰形式( HelloVue)或者短横线分割形式( hello-vue ),

在标签处要求使用短横线形式进行书写 例 :

 <hello-vue>组件</hello-vue>

三 丶组件的嵌套

在前端应用中,页面视图也相当于一个组件,所以想要实现复杂的页面布局组件与组件的嵌套是开发过程中必不可少的

语法 : 

    <div id="app">
        <My-name></My-name>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        let ZhName = {
            template: "<p>组件的嵌套{{ZhName}}</p>",
            data() {
                return {
                    info: {
                        name: "ZhName",
                    }
                }
            }
        }
        Vue.component("MyName", {
            template: "<div><h2>组件,名字为{{name}}</h2><Zh-name></Zh-name></div>",
            data() {
                return {
                    name: "MyName"
                }
            },
            components: {
                ZhName
            }
        })

四 丶动态组件

Vue为了实现视图界面中组件的切换,提供了通过特殊标签属性方式实现

语法 : <component :is="组件名称"></component>

    <div id="app">
        <!-- 动态组件使用component标签的is属性达到切换组件的功能 -->
        <component :is="page"></component>
    </div>
    <script>
        let ZhName = {
            template: "组件",
            data() {
                return {
                    info: {
                        name:"ZhName"
                    }
                }
            }
        }
        const vm = new Vue({
            el: "#app",
            data: {
                page: "MyName"
            },
            components: {
                "MyName": {
                    template: "<h1>{{naem}}</h1>",
                    data() {
                        return {
                            name: "李四"
                        }
                    }
                },
                ZhName,
            }
        })

        当page变量数据变成其它组件名称就会切换成其它组件

组件的缓存 : 在前端视图界面中有些组件内部数据长时间不会发生改变,这样在组件切换时会被多次销毁与创建,在一定程度上影响页面的处理效率与性能,所以在Vue中提供了一种缓存机制,可以用于缓存指定组件并使其不会在隐藏时销毁

语法 : 

    <!-- 组件的缓存需要将组件包含在keep-alive标签内部 -->
    <keep-alive>
        <component :is="page"></component>
    </keep-alive>

案例 : 

    <div id="app">
        <keep-alive>
            <component :is="page"></component>
        </keep-alive>
        <ul>
            <li @click="page = 'MyName'">第一页</li>
            <li @click="page = 'HeName'">第二页</li>
        </ul>
    </div>
    <script>
        let MyName = {
            template: "<h2>{{ name }}</h2>",
            data() {
                return {
                    name: "首页"
                }
            }
        }
        let HeName = {
            template: "<h2>{{ name }}</h2>",
            data() {
                return {
                    name: "二页"
                }
            },
            created() {
                console.log("组件被创建了");
            },
            destroyed() {
                console.log("组件被销毁了");
            }
        }
        // 局部组件的定义
        const vm = new Vue({
            el: "#app",
            data: {
                page: "MyName",
            },
            components: {
                MyName,
                HeName
            }
        })
    </script>

效果 : 我们在点击列表中的第一页与第二页时会更改page数据的值,这时页面的组件会进行切换,

多次切换时我们可以观察到生命周期函数created只会执行一次 , 并且destroyed函数不会执行。