vue 组件全局组件和局部组件component

1、全局组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            vue组件测试
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            
            //注册全局组件
            Vue.component('my-component',{
                template: '<div>我是全局组件</div>'
            })
            
            Vue.component('other-component', {
                template: '<div>我是另一个全局组件<my-component></my-component></div>'
            })
            
            new Vue({
                el:"#app",
                template:'<other-component></other-component>'
            })
            
        </script>
    </body>
</html>

显示结果：

我是另一个全局组件

我是全局组件

2、局部组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            vue组件测试
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
                
            //注册局部组件
            const child = {
                template: '<div>我是局部组件</div>'
            }
            
            new Vue({
                el:"#app",
                template:'<my-component></my-component>',
                components:{
                    'my-component': child
                }
            })
            
        </script>
    </body>
</html>

显示结果：

我是局部组件

3、组件嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            vue组件测试
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
                
            //注册局部组件
            const child = {
                template: '<div>我是局部child组件</div>'
            }
            
            const father = {
                template: '<div>我是father组件，我包含了：<child-component></child-component> </div>',
                components: {
                    'child-component': child
                }
            }
            const grandFather={
                template: '<div>我是grandFather组件，我包含了：<father-component></father-component> </div>',
                components: {
                    'father-component': father
                }
            }
            new Vue({
                el:"#app",
                template:'<my-component></my-component>',
                components:{
                    'my-component': grandFather
                }
            })
            
        </script>
    </body>
</html>

显示结果：

我是grandFather组件，我包含了：

我是father组件，我包含了：

我是局部child组件

参考自：https://www.cnblogs.com/penghuwan/p/7222106.html#_label0

相关阅读:
三方登录微博url接口
 微博三方登录流程（原理）
celery配置与基本使用
 spring 验证框架
 IDEA 插件整理
 spring security笔记默认登陆页面源码
 EXTJS7 自定义日期时间选择输入框
 EXTJS7 combobox本地模式动态修改选项
 EXTJS7 combobox 下拉加载数据源码
 nginx 反向代理端口号丢失处理
原文地址：https://www.cnblogs.com/150536FBB/p/11328651.html

vue 组件 全局组件和局部组件component

vue 组件全局组件和局部组件component