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

//注册组件的简写方式

                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. RecyclerView+SwpieRefreshLayout（转载）

    开源库BaseRecyclerViewAdapterHelperhttp://blog.csdn.net/xiangzhihong8/article/details/52138669http://ww ...

  2. Linux服务器中创建Oracle数据库实例

    紧接上篇,在Linux服务器已经完成对Oracle数据库软件的安装后,接下来要创建Oracle实例,看图说话: [su – oracle echo $DISPLAY export DISPLAY=10 ...

  3. 使用cmd导入导出oracle数据库dmp文件

    exp scott/test@192.168.0.195/orcl file=C:\Users\zz\Desktop\1\gd_base.dmp log=C:\Users\zz\Desktop\1\g ...

  4. python学习中的bug

    1.在pycharm的terminal中的python工程目录下update pip失败,但是在cmd中为什么就可以.’

  5. python生成组织架构图(网络拓扑图、graph.editor拓扑图编辑器)

    Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目,旨在提供可供扩展的拓扑图编辑工具, 拓扑图展示.编辑.导出.保存等功能,此外 ...

  6. ruby 基础知识 - Class 与 Module

    原文 1. 因為 Ruby 並沒有「屬性」(property/attribute)這樣的設計,要取用實體變數,需要另外定義的方法才行: class Cat def initialize(name, g ...

  7. Spring AOP 随记

    本周经历各种面试失败后,最后一站张建飞老大的阿里,感觉有着这般年纪不该有的垃圾履历而忧伤中,不过还是要继续加油的,毕竟他说的好,都是经历,无愧初心. 所以为了更加深入理解Spring AOP我又翻起了 ...

  8. Java编程基础篇第五章

    数组概述 概念:数组是存储同一种数据类型多个元素的集合.也可以看成是一个容器.数组既可以存储基本数据类型,也可以存储引用数据类型.应用场景:为了存储同种数据类型的多个值 数组定义格式 格式1:元素类型 ...

  9. 线程同步-SpinWait

    这次将描述如何不适用内核模式的方式来使线程等待.SpinWait,它是一个混合同步构造,被设计为使用用户模式等待一段时间,然后切换到内核模式以节省CPU时间. 代码Demo: using System ...

  10. HDU_5528_Count a * b

    Count a * b Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Tot ...