美文网首页
Vue创建组件

Vue创建组件

作者: 小丘啦啦啦 | 来源:发表于2019-04-20 20:08 被阅读0次
    • 无论以那种方式创建组件,组件的template属性指向的模板内容,有且只能有一个根元素。
    • 创建全局组件其实也可以说是一种方式。

    一、创建全局组件
    全局组件,即可以在任意Vue实例内容区调用,因为是全局。
    1、使用Vue.extend创建全局的Vue组件

    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <style>
    
            </style>
        </head>
        <body>
            <div id="app">
                <!-- 使用组件,把组件名称以html标签形式引入到页面中 -->
                <!-- 注意:如果组件名称是驼峰命名,引入的时候要改为小写和-连接,其他时候可以直接引入 -->
                <my-com1></my-com1>
            </div>
            <script>
                // 使用Vue.extend来创建全局的Vue组件
                //创建一个组件模板对象
                var com1 = Vue.extend({ //传入一个配置对象
                    //通过template属性,指定组件要展示的html内容结构,模板
                    template: '<h3>这是使用Vue.extend创建的组件</h3>' 
                });
                //也可以通过对象字面量形式,定义一个组件模板对象
                // var com1 = { 
                //  template: '<h3>这是使用Vue.extend创建的组件</h3>' 
                // };
    
                //使用Vue.component('组件名称',创建出来的组件模板对象即如com1)注册一个全局组件
                Vue.component('myCom1', com1);
                //之后在页面写了一个myCom1,对应就会展示com1模板对象中template的内容
    
                var vm = new Vue({
                    el: "#app",
                    data: {
    
                    },
                    methods: {
    
                    }
                });
            </script>
        </body>
    </html>
    

    创建一个组件要分两个步骤,有点赘余,可以合为一个步骤。

    2、直接使用Vue.component创建全局Vue组件
    第一种方法分为两步,可以合成一步简写来创建组件。

    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <style>
    
            </style>
        </head>
        <body>
            <div id="app">
                <my-com1></my-com1>
            </div>
            <script>
    
                //可合为一步创建组件
                /* Vue.component('myCom1', Vue.extend({ 
                    template: '<h3>直接使用Vue.component创建的Vue组件</h3>' 
                })); */
                //也可以是一个字面量对象
                Vue.component('myCom1',{ 
                    template: '<h3>直接使用Vue.component创建的Vue组件</h3>' 
                });
                
                var vm = new Vue({
                    el: "#app",
                    data: {
    
                    },
                    methods: {
    
                    }
                });
            </script>
        </body>
    </html>
    

    前面两种写template指向的模板字符串标签内容的时候会没有内容提示,容易写错,所以可以把模板字符串标签提出来。

    3、通过template元素在外部定义组件结构
    在被Vue对象控制的元素外面,用Vue提供的template元素定义组件的html模板,在html处定义代码结构舒服,编辑器有智能提示。

    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <style>
    
            </style>
        </head>
        <body>
            <div id="app">
                <mycom1></mycom1>
            </div>
            <!-- 在被vue对象控制的元素#app外面使用template元素,定义组件的html标签 -->
            <template id="tmp1">
                <!-- 此处template内部也只能有一个根元素 -->
                <div>
                    <h3>这是通过template元素在外部定义html模板的组件</h3>
                </div>
            </template>
            
            <script>
                //也可以是一个字面量对象
                Vue.component('mycom1',{ 
                    template: '#tmp1'   //id指向一个元素 
                });
                
                
                var vm = new Vue({
                    el: "#app",
                    data: {
    
                    },
                    methods: {
    
                    }
                });
            </script>
        </body>
    </html>
    

    二、创建私有组件
    即在Vue实例对象中加上components属性,指向一个模板对象。

    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
    
        </style>
    </head>
    
    <body>
        <div id='app1'>
            <log1></log1>
        </div>
        <div id='app2'>
            <log2></log2>
        </div>
        <template id="templ2">
            <h2>app2的私有组件</h2>
        </template>
    
        <script>
            var log2 = {
                template: '#templ2'
            };
            var vm1 = new Vue({
                el: "#app1",
                components: {
                    log1: {
                        template: '<h1>app1的私有组件</h1>'
                    }
                },
            });
            var vm2 = new Vue({
                el: '#app2',
                components: {
                    log2   //也可以直接引用外部定义的模板对象
                }
            });
        </script>
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:Vue创建组件

          本文链接:https://www.haomeiwen.com/subject/ghdtgqtx.html