vue声明组件四种方式

 

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

 

组件化和模块化的不同：

 

   模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

 

   组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

 

 

方式一、

   <div id='app'>
        <first-login></first-login>
    </div>

    <script>
        // 方式一  
　　　　　//声明组件内容
        var first = Vue.extend({
            template: '<h1>第一种方式</h1>'
        })
        // 全局注册 参数一 组件名称（组件名称不支持驼峰命名）  参数二 组件内容
        Vue.component('first-login',first)
        
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
        })
    </script>

方式二、

    <div id='app'>
        <second-login></second-login>
    </div>

    <script>
        // 方式二  
        Vue.component('second-login',{
            template:'<h1>第二种方式</h1>'
        })

        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
        })
    </script>

方式三、

    <div id='app'>
        <!-- 方式三 -->
        <third-login></third-login>
    </div>
    <script type='template' id="third">
        <h1>第三种方式</h1>
    </script>

    <script>
        // 方式三
        Vue.component('third-login',{
            template:'#third'
        })

        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
        })
    </script>

方式四、

 

    <div id='app'>
        <!-- 方式四 -->
        <forth-login></forth-login>
    </div>
    <!-- 方法四 -->
    <template id="forth">
        <!-- 只能有一个根元素 -->
        <h1>第四种方式</h1>
    </template>
    <script>
        // 方式四
        Vue.component('forth-login', {
            template: '#forth'
        })

        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
        })
    </script>