Vue创建组件的三种方式

1、第一种：

/* 第一种方式创建组件 */
/* 第一种方式创建组件 */
const com = Vue.extend({
    template:'<h1>这是一个模板组件</h1>'
});
Vue.component("myView",com);

<!-- 第一种方式展示组件 -->
<my-view></my-view>

2、第二种

/* 第二种方式创建组件 */
Vue.component("myAction",{
    template:'<h1>{{msg}}</h1>',
    data:function(){
        return {msg:'这是一个action组件'}
    }
})
<!-- 第二种方式展示组件 -->
<my-action></my-action>

3、第三种

/* 第三种方式创建组件 */
Vue.component('myLive',{
    template:'#temp',
    data:function() {
        return {msgg:'这是第三种方式创建组件的'}
    }
})
<!-- 第三种方式创建组件的模板 -->
<template id='temp'>
        <!-- 必须要有一个根标签包住，和前两种是一致的 -->
    <div>
        <h1>
            {{msgg}}
        </h1>
    </div>
</template>
<!-- 第三种方式创建三种方式 -->
<my-live></my-live>

4、测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 第一种方式展示组件 -->
            <my-view></my-view>
            <!-- 第二种方式展示组件 -->
            <my-action></my-action>
            <!-- 第三种方式创建三种方式 -->
            <my-live></my-live>
            <!-- 私有组件不生效 -->
            <my-x></my-x>
        </div>
        
        <div id="app1">
            <my-action></my-action>
            <!-- 私有组件生效 -->
            <my-x></my-x>
        </div>
        
        <!-- 第三种方式创建组件的模板 -->
        <template id='temp'>
            <!-- 必须要有一个根标签包住，和亲啊两种是一致的 -->
            <div>
                <h1>
                    {{msgg}}
                </h1>
            </div>
        </template>
    </body>
    <script type="text/javascript">
        /* 第一种方式创建组件 */
        const com = Vue.extend({
            template:'<h1>这是一个模板组件</h1>'
        });
        Vue.component("myView",com);
        /* 第二种方式创建组件 */
        Vue.component("myAction",{
            template:'<h1>{{msg}}</h1>',
            data:function(){
                return {msg:'这是一个action组件'}
            }
        })
        /* 第三种方式创建组件 */
        Vue.component('myLive',{
            template:'#temp',
            data:function() {
                return {msgg:'这是第三种方式创建组件的'}
            }
        })
        const vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{
            }
        })
        
        
        const vm1 = new Vue({
            el:'#app1',
            data:{
            },
            methods:{
            },
            components:{
                "myX":{
                    template:"<h1>{{msgx}}</h1>",
                    data:function() {
                        return {msgx:'这是我的私有组件'}
                    }
                }
            }
        })
    </script>
</html>

最后编辑于：2020.05.26 10:16:08