vue教程3-03 vue组件，定义全局局部组件，配合模板，动态组件

Posted 白杨-M

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue教程3-03 vue组件，定义全局局部组件，配合模板，动态组件相关的知识，希望对你有一定的参考价值。

vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

一、定义一个组件

定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
    template:\'<h3>我是标题3</h3>\'
});

Vue.component(\'aaa\',Aaa);

    *组件里面放数据:
        data必须是函数的形式，函数必须返回一个对象(json)
2. 局部组件
    放到某个组件内部
var vm=new Vue({
    el:\'#box\',
    data:{
        bSign:true
    },
    components:{ //局部组件
        aaa:Aaa
    }
});
1. 全局组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>我是标题3</h3>\'
        });

        Vue.component(\'aaa\',Aaa);


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

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

    <script>
　　　　//另外一种写法，全局
        Vue.component(\'my-aaa\',{
            template:\'<strong>好</strong>\'
        });

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

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

 

组件里面放数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>
    <script>
        var Aaa=Vue.extend({
            //组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)
            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>

 

2. 局部组件
放到某个组件内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa></aaa>
        <br/>
        <br/>
        <my-aaa></my-aaa>
    </div>
    <script>
        var Aaa=Vue.extend({
            template:\'<h3>{{msg}}</h3>\',
            data(){
                return {
                    msg:\'ddddd\'
                }
            }
        });
        var vm=new Vue({
            el:\'#box\',
            data:{
                bSign:true
            },
            components:{ //局部组件
                aaa:Aaa,
                \'my-aaa\':Aaa//这里的my-aaa需要用引号
            }
        });
    </script>
</body>
</html>

另外一种写法，局部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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">标题2->{{msg}}</h2>\'
                }
            }
        });

    </script>
</body>
</html>
 
二、配合模板

配合模板:
    1. template:\'<h2 @click="change">标题2->{{msg}}</h2>\'

    2. 单独放到某个地方
        a). <script type="x-template" id="aaa">
            <h2 @click="change">标题2->{{msg}}</h2>
        </script>
        b). <template id="aaa">
            <h1>标题1</h1>
            <ul>
                <li v-for="val in arr">
                    {{val}}
                </li>
            </ul>
        </template>

方法一：

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

    <script type="x-template" id="aaa">
        <h2 @click="change">标题2->{{msg}}</h2>
        <ul>
            <li>1111</li>
            <li>222</li>
            <li>3333</li>
            <li>1111</li>
        </ul>
    </script>

    <script>
        var vm=new Vue({
            el:\'#box\',
            components:{
                \'my-aaa\':{
                    data(){
                        return {
                            msg:\'welcome vue\'
                        }
                    },
                    methods:{
                        change(){
                            this.msg=\'changed\';
                        }
                    },
                    template:\'#aaa\'
                }
            }
        });
    </script>
</body>
</html>

方法二：

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

    <template id="aaa">
        <h1 @click="change">{{msg}}</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 title\';
                        }
                    },
                    template:\'#aaa\'
                }
            }
        });
    </script>
</body>
</html>

 

三、动态组件

动态组件:
<component :is="组件名称"></component>

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <input type="button" @click="a=\'aaa\'" value="aaa组件">
        <input type="button" @click="a=\'bbb\'" value="bbb组件">
        <component :is="a"></component>
        <!--<component :is="组件名称"></component>-->
    </div>
    <script>
        var vm=new Vue({
            el:\'#box\',
            data:{
                a:\'aaa\'
            },
            components:{
                \'aaa\':{
                    template:\'<h2>我是aaa组件</h2>\'
                },
                \'bbb\':{
                    template:\'<h2>我是bbb组件</h2>\'
                }
            }
        });
    </script>
</body>
</html>

 


























以上是关于vue教程3-03 vue组件，定义全局局部组件，配合模板，动态组件的主要内容，如果未能解决你的问题，请参考以下文章

Vue全局组件与局部组件

vue 引入全局组件/局部引入

vue自定义全局loading加载组件

注册全局组件和局部组件

TZ_16_Vue定义全局组件和局部组件

vue定义全局指令和局部指令