vue组件

在vue中，组件是最重要的组合部分，官方中定义组件为可复用的vue实例，分为全局组件和局部组件，接下来通过实例来分别演示两种不同的组件。

全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>

    <script>
        var Aaa=Vue.extend({
            template:'<h3>我是全局组件</h3>'
        });

        Vue.component('aaa',Aaa);

        var vm=new Vue({
            el:'#box',
        });

    </script>
</body>
</html>

通过上面的例子，我们可以总结出全局组件的使用步骤：

调用vue.extend()创建一个组件构造器，该构造器中有一个选项对象的template属性可以用来定义组件要渲染的HTML
使用vue.component()注册组件，需要提供2个参数：组件的标签和组件构造器。vue.component()内部会调用组件构造器，创建一个组件实例
将组建挂载到某个vue实例下。

因为组件是可复用的vue实例，所以它们也能接收data、computed、watch、methods以及生命周期钩子等选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>

    <script>
        var Aaa=Vue.extend({
            data:{
                msg:'我是全局组件'
            },
            template:'<h3>{{msg}}</h3>'
        });

        Vue.component('aaa',Aaa);


        var vm=new Vue({
            el:'#box',
            data:{
                bSign:true
            }
        });

    </script>
</body>
</html>

当我们像往常一样使用data选项时，发现结果并不是预期中那样的，这是因为一个组件的data选项必须是一个函数，该函数返回一个对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>
    <script>
        var Aaa=Vue.extend({
            data(){
                return {
                    msg:'我是全局组件'
                };
            },
            methods:{
                change(){
                    this.msg='changed'
                }
            },
            template:'<h3 @click="change">{{msg}}</h3>'
        });
        Vue.component('aaa',Aaa);

        var vm=new Vue({
            el:'#box',
            data:{
                bSign:true
            }
        });
    </script>
</body>
</html>

局部组件

调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。
如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。

因此我们可以将上面的全局组件改为局部组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>
    <script>
        var Aaa=Vue.extend({
            template:'<h3>{{msg}}</h3>',
            data(){
                return {
                    msg:'我是局部组件'
                }
            }
        });
        var vm=new Vue({
            el:'#box',
            data:{
                bSign:true
            },
            components:{ //局部组件
                aaa:Aaa
            }
        });
    </script>
</body>
</html>

虽然上面的组件是在某个具体的vue实例下注册的，但是组件构造器还是全局的，个人认为这个并不是完全意义上的局部组件，下面这种组件才是真正意义上的局部组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            components:{
                'my-aaa':{
                    data(){
                        return {
                            msg:'welcome vue'
                        }
                    },
                    methods:{
                        change(){
                            this.msg='changed';
                        }
                    },
                    template:'<h2 @click="change">局部组件-->{{msg}}</h2>'
                }
            }
        });

    </script>
</body>
</html>

组件模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>

    <template id="aaa">
        <h1>标题1</h1>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>

    <script>
        var vm=new Vue({
            el:'#box',
            components:{
                'my-aaa':{
                    data(){
                        return {
                            msg:'welcome vue',
                            arr:['apple','banana','orange']
                        }
                    },
                    methods:{
                        change(){
                            this.msg='changed';
                        }
                    },
                    template:'#aaa'
                }
            }
        });

    </script>
</body>
</html>