创建私有组件

5.1 节介绍了创建全局组件的3种方式，全局组件可以在任意的 Vue 实例中使用，而私有组件只能在一个 Vue 实例中使用，下面开始创建私有组件，代码如下。

视图层代码如下。

<div id="main">
    <mycom4></mycom4>
</div>

Vue 实例代码如下。

<script>
    var vm = new Vue({
        el: '#main',
        data: {},
        methods: {},
        // 私有组件
        components: {
            mycom4: {
                // 同样可以拆分
                template: '<h1>私有组件</h1>'
            }
        }
    });
</script>

代码解析如下。

在 Vue 实例对象中，私有组件是 components 属性，它和 data 属性、methods 属性平级。components 属性值为对象，可以任意创建组件，上述代码中的 mycom4 是组件名字。

由于代码都写在 vm 实例对象中，降低了代码阅读性，为解决这个问题可以使用私有组件拆分代码，代码如下。

视图层代码如下。

<div id="main">
    <mycom4></mycom4>
    <mycom5></mycom5>
</div>

vm 实例代码如下。

<script>
    var mycom5 = {
        template: '<h1>私有组件拆分</h1>'
    };

    var vm = new Vue({
        el: '#main',
        data: {},
        methods: {},
        components: {
            mycom4: {
                template: '#temp2'
            },
            // mycon5: mycom5
            // ES6 语法简写成 mycom5
            mycom5
        }
    });
</script>

代码解析如下。

在 components 属性中新建 mycom5 组件，其值是 mycom5 变量，mycom5 变量所储存的就是要渲染的 HTML 代码。

在对象中，当属性名和属性值相同时可以简写，所以组件代码可以这样写，如下所示。

<script>
    var mycom5 = {
        template: '<h1>私有组件拆分</h1>'
    };

    var vm = new Vue({
        el: '#main',
        data: {},
        methods: {},
        components: {
            mycom4: {
                template: '#temp2'
            },
            mycom5
        }
    });
</script>

使用 es6 语法，简写成 mycom5。

组件中的 data 和 methods

可以把组件当成一个 Vue 实例对象，在 Vue 实例对象中使用过 data 属性、methods 属性以及生命周期函数等，在组件中同样也可以使用这些属性，但使用方法并不完全一样，例如以下组件代码。

<script>
    var mycom5 = {
        template: '<h1>组件--{{ msg }}</h1>',
        data() {
            return {
                msg: 'Hello'
            };
        },
        methods: {}
    };

    var vm = new Vue({
        el: '#main',
        data: {},
        methods: {},
        components: {
            // ES6 语法简写成 mycom5
            mycom5
        }
    });
</script>

代码解析如下。

和 template 属性平级，可以写 data 属性和 methods 属性，组件中的 data 与 Vue 实例中的 data 用法不同。

Vue 实例中的 data 是一个对象，可以直接写数据，组件中的 data 是一个方法，并且必须返回一个对象。在 return 的对象中存储数据，组件中 methods 属性的使用方法和 Vue 实例中 methods 属性的使用方法是一样的，都是存储方法。

组件选项卡切换案例

本节制作组件选项卡切换案例，分为双组件切换和多组件切换。

双组件切换

视图层代码如下。

<div id="app" v-cloak>
    <a @click="tab(1)">登录</a>
    <a @click="tab(0)">注册</a>
    <com1 v-if="flag"></com1>
    <com2 v-else></com2>
</div>

Vue 实例代码如下。

<script>
    var com1 = {
        template: '<h1>login组件</h1>'
    };

    var com2 = {
        template: '<h1>register组件</h1>'
    };

    var vm = new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {
            tab(i) {
                if (i == 1) {
                    this.flag = true;
                } else {
                    this.flag = false;
                }
            }
        },
        components: {
            com1,
            com2
        }
    });
</script>

代码解析如下。

此案例练习私有组件的创建，com1 和 com2 是两个私有组件。
使用 v-if 和 v-else 控制组件的显示和隐藏。
绑定单击事件，根据传递的参数控制 flag 属性的值。

多组件切换

使用 v-if 和 v-else 只能实现两个组件之间的切换，使用 <component> 标签可以实现多组件切换，代码如下。

视图层代码如下。

<div id="app" v-cloak>
    <a @click="tab('com1')">登录</a>
    <a @click="tab('com2')">注册</a>
    <a @click="tab('com3')">首页</a>
    <!-- 组件的名称是字符串，需要使用引号 -->
    <component :is="comName"></component>
</div>

<script>
    var com1 = {
        template: '<h1>login组件</h1>'
    };
    var com2 = {
        template: '<h1>register组件</h1>'
    };
    var com3 = {
        template: '<h1>首页</h1>'
    };

    var vm = new Vue({
        el: '#app',
        data: {
            comName: 'com1'
        },
        methods: {
            tab(i) {
                this.comName = i;
            }
        },
        components: {
            com1,
            com2,
            com3
        }
    });
</script>

代码解析如下。

练习私有组件创建（com1、com2、com3）。
把组件放到 component 标签，绑定 is 属性，is 属性的值是哪个组件，页面就会显示哪个组件。
添加单击事件，把组件名字传递给 comName 变量。