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

//注册组件的简写方式

                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. ubuntu16.04 在/etc/network/interfaces设置static ip无效

    双网卡使用无线网卡上互联网,使用以太网卡连局域网,在/etc/network/interfaces里对以太网卡设置static ip无效,使用ifconfig临时设置也仅能工作一会,设置的ip马上就消 ...

  2. 使用redis接管cookie

    class RedisCookie { // 默认配置名称(使用load_config加载) private $_default_config_path = 'package/cache/redis_ ...

  3. codeforces 1106 E

    显然是dp啊,dp[i][j]表示到时间i打扰了j次的最小收益 显然要排序,官方题解说set没看懂,优先队列就行啊. 按照时间排序,显然这样扫的话可以保证当前时间点的点在优先队列里吧, 然后有打断和不 ...

  4. java的Io流学习

    Java中io流的学习(一)File:https://blog.csdn.net/qq_41061437/article/details/81672859 Java中io流的学习(二)FileInpu ...

  5. 严重: A child container failed during start的问题解决方法

    找到tomcat中的server.xml中的文件, 将图中阴影的部分注释掉,即可.

  6. mui 窗口管理及窗口之间的数据传递

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. python全栈开发 * 进程池,线程理论 ,threading模块 * 180727

    一.进程池 (同步 异步 返回值) 缺点: 开启进程慢 几个CPU就能同时运行几个程序 进程的个数不是无线开启的 应用: 100个任务 进程池 如果必须用多个进程 且是高计算型 没有IO型的程序 希望 ...

  8. python的var_dump，打印对象内容

    from __future__ import print_function from types import NoneType __author__ = "Shamim Hasnath&q ...

  9. 在centos7下安装python3的步骤

    环境搭建 准备工具: centos7:http://mirror.bit.edu.cn/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1611.iso virtus ...

  10. JedisCluster简单使用

    项目中因为一些原因需要用到缓存,之前没有接触过,在此做一些简单的使用记录. 1.jedis在项目中依赖 <dependency> <groupId>redis.clients& ...