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

//注册组件的简写方式

                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. vs启动出错（chenlu-1）：参数“basePath”不能是相对路径

    参数“basePath”不能是相对路径 原因: 1.调试路径下没有exe文件.没有生成exe文件. 2.项目属性->配置属性->调试->命令中的参数被设置为相对路径.

  2. 转载：VOC2007数据集制作

    转载自:https://blog.csdn.net/gaohuazhao/article/details/60871886 另外,可参考:https://blog.csdn.net/dcxhun3/a ...

  3. Kylin如何进行JDBC方式访问或者调用

    Kylin提供了标准的ODBC和JDBC接口,能够和传统BI工具进行很好的集成.分析师们可以用他们最熟悉的工具来享受Kylin带来的快速.我们也可以对它进行定制开发报表等,把kylin当做数据库服务器 ...

  4. TemplateBuilder Android Studio

    TemplateBuilder:是Android Studio的一个开发模板,大大提高开发效率.

  5. hibernate06--参数的绑定

    创建Dept实体类 以及 对应的 Dept.hbm.xml文件 /** * @author 小豆腐 * *部门的实体类 */ public class Dept { private Integer d ...

  6. react纯手写全选与取消全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Linux命令vi/vim 使用方法讲解

    vi/vim 基本使用方法 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的 ...

  8. 强类型Dataset使用事务（改进原有方法）

    以下部份转自:http://blog.csdn.net/nfbing/article/details/5803980 关于强类型Dataset的用法和好处,我就不再多说,网上关于这方面的资料很多 , ...

  9. Android启动页欢迎界面大全 （网址）

    地址:http://download.csdn.net/detail/u013424496/9539810

  10. 大课深度复盘、解密研发效率之道 | 第42届MPD工作坊成都站日程公布！

    互联网时代,随着区块链.大数据.人工智能等技术的快速发展,产品迭代速度飞快.在这样的市场环境下,提升研发效率.降低研发成本,同时支撑业务的快速发展,是每个企业都追求的目标之一. 大中型企业如何快速转型 ...