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>