在上篇博客中介绍了组件，在注册组件的简写中就用到了全局组件

//注册组件的简写方式

                Vue.component('my-componenta',{

                    template:'<h2>hello vue</h2>'

                });

组件可分为全局组件与局部组件；

全局组件： 在全局API中的Vue.component注册；该项目中所有Vue实例内均可以使用；

局部组件： 在Vue实例中的components选项中注册； 只能在本实例中使用；

现在创建两个Vue实例来进行验证全局与局部的区别：

由图可知全局的可以在定义的所有div中进行调用，但是局部只能在其本身定义好进行调用：

vue代码;

<script>

            window.onload= () =>{

                //注册组件的简写方式

                Vue.component('my-component-a',{

                    template:'<h2>欢迎来到perfect*的博客园！！！</h2>'

                });

                new Vue({

                el:'#one',

                data:{

                    msg:''

                },

                components:{

                    "my-component-b":{

                        template:'<h2>欢迎来到perfect*的博客园_01</h2>'

                    }

                }

        });

            new Vue({

                el:'#two',

                data:{

                    msg:''

                }

        });

            }

        </script>

html:

<div id="one">

            <my-component-a></my-component-a><!--全局的-->

            <my-component-b></my-component-b><!--局部的-->

        </div>

        <div id="two">

                <my-component-a></my-component-a><!--全局的-->

                <my-component-b></my-component-b><!--局部的-->

        </div>

也可以进行如下方式来进行使用：

全局组件和局部组件都可以存储数据，但是存储的方式与Vue实例中的data稍有不同； 组件里存储数据，data后需加上函数，数据写在函数体中。

例：以下是在局部组件的data中，定义了name属性；

<script>

            window.onload= () =>{

                //注册组件的简写方式

                Vue.component('my-component-a',{

                    template:'<h2>{{name}}</h2>',

                    data:function(){

                        return {

                            name:'欢迎来到perfect*的博客园！！！'

                        }

                    }

                });

                new Vue({

                el:'#one',

                data:{

                    msg:''

                },

                components:{

                    "my-component-b":{

                        template:'<h2>{{name}}</h2>',

                        data(){

                            return{

                                name:'欢迎来到perfect*的博客园_01'

                            }

                        }

                    }

                }

        });

            new Vue({

                el:'#two',

                data:{

                    msg:'abc'

                }

        });

            }

        </script>

最终代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>全局组件与局部组件</title>

         <script type="text/javascript" src="../js/vue.js" ></script>

         <script>

             window.onload= () =>{

                 //注册组件的简写方式

                 Vue.component('my-component-a',{

                     template:'<h2>{{name}}</h2>',

                     data:function(){

                         return {

                             name:'欢迎来到perfect*的博客园！！！'

                         }

                     }

                 });

                 new Vue({

                 el:'#one',

                 data:{

                     msg:''

                 },

                 components:{

                     "my-component-b":{

                         template:'<h2>{{name}}</h2>',

                         data(){

                             return{

                                 name:'欢迎来到perfect*的博客园_01'

                             }

                         }

                     }

                 }

         });

             new Vue({

                 el:'#two',

                 data:{

                     msg:'abc'

                 }

         });

             }

         </script>

     </head>

     <body>

         <div id="one">

             <my-component-a></my-component-a><!--全局的-->

             <my-component-b></my-component-b><!--局部的-->

         </div>

         <div id="two">

                 <my-component-a></my-component-a><!--全局的-->

                 <my-component-b></my-component-b><!--局部的-->

         </div>

     </body>

 </html>

全局组件与局部组件

Vue 组件&组件之间的通信 之全局组件与局部组件的更多相关文章

  1. vue组件父子之间相互通信案例

  2. vue组件之间的通信，父子之间的数据通信

    父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...

  3. vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  4. vue组件之间的通信， 父子组件通信，兄弟组件通信

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...

  5. 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

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

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  7. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  8. Angular中不同的组件间传值与通信的方法

    主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...

  9. VueJS组件之全局组件与局部组件

    全局组件 所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

随机推荐

  1. 写在开始前---web异常处理

    分层项目中,有上层调用下层,每一层都可能出错,比如数据库连接,文件读写等异常.除了运行时程序的异常,还有业务逻辑的一些问题.发生异常需要做一定处理,既要让开发人员便于排查问题,又要让用户看到友好又便于 ...

  2. Install Local SQL In Mac OS

    extends:http://www.cnblogs.com/maxinliang/p/3583702.html 一.安装 到MySQL官网上http://dev.mysql.com/download ...

  3. iOS - 集成高德SDK解决Marker点重复点击无效问题

    场景: 在处理Marker点击事件时,此时地图上有Marker点A及Marker点B,当选中Marker点A后,SDK方法 "didSelectAnnotationView"响应了 ...

  4. JBPM工作流（一）——实现一个简单的工作流例子

    一.JBPM定义 JBPM,全称是Java Business Process Management(业务流程管理),它是覆盖了业务流程管理.工作流.服务协作等领域的一个开源的.灵活的.易扩展的可执行流 ...

  5. kill、killall、pkill杀手三人组

    1.1 kill.killall.pkill杀手三人组 1.利用kill 进程号 方式杀掉rsync进程 [root@backup ~]# ps -ef |grep rsync root 3500 1 ...

  6. Codeforces 455A - Boredom - [DP]

    题目链接:https://codeforces.com/problemset/problem/455/A 题意: 给出一个 $n$ 个数字的整数序列 $a[1 \sim n]$,每次你可以选择一个 $ ...

  7. Java 关于密码处理的工具类[MD5编码][AES加密/解密]

    项目中又遇到了加密问题,又去翻了半天,然后做测试,干脆就把常用的两类小结一下. 1.第一种所谓的MD5加密 其实也不算加密,只是基于Hash算法的不可逆编码而已,等于说,一旦经过MD5处理,是不可能从 ...

  8. Django之get请求url的参数

    当get网址是127.0.0.1:8000/mysite10这种类型的网址时 有两种方法: 1,在urls的路由的urlpatterns里面这样定义路由 re_path('^mysite(\d+)$' ...

  9. Node项目的Restful化

    提倡Restful风格的目的或者作用主要是,结构清晰.符合标准.易于理解.扩展方便. 个人把Restful简单粗暴地理解为:路由不包含动词. 怎么做到路由不包含动词呢?答案是,启用常用的GET和POS ...

  10. 深入浅出Vue基于“依赖收集”的响应式原理（转）

    add by zhj: 文章写的很通俗易懂,明白了Object.defineProperty的用法 原文:https://zhuanlan.zhihu.com/p/29318017 每当问到VueJS ...