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

//注册组件的简写方式

                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. 【netcore基础】CentOS 7.6.1810 搭建.net core 2.1 linux 运行环境 nginx反向代理 supervisor配置自启动

    之前写过一篇Ubuntu的环境搭建博客,感觉一些配置大同小异,这里重点记录下 nginx 作为静态 angular 项目文件服务器的配置 参考链接 [netcore基础]ubuntu 16.04 搭建 ...

  2. 用svg绘制圣诞帽

    今天是圣诞节,无意中看到csdn博客上面给我的头像带了个圣诞帽,比较好奇,想看看csdn是怎么实现的,果然用的是svg实现,不过代码有点冗长. <html> <body> &l ...

  3. pandas replace 替换功能function

    list like replace method dict like replace method regex expression import pandas as pd import numpy ...

  4. 23.react-router 路由

    箭头函数扩展: 箭头函数: functoin 函数名(参数){    函数体 } 箭头函数: 1.把function删掉 , 2.参数和{}之间加上 箭头=> 简写: 1.参数的简写:只有一个参 ...

  5. vue里的v-show和v-if

    v-show:false            对应的是display:none:不移除dom元素.对网页渲染性能更好,适应于频繁的操作该dom的显示隐藏. v-if:  false       对应 ...

  6. An overview of gradient descent optimization algorithms

    原文地址:An overview of gradient descent optimization algorithms An overview of gradient descent optimiz ...

  7. kafka的一些参数

    参考文档: https://blog.csdn.net/fengzheku/article/details/50585972 http://kafka.apache.org/documentation ...

  8. 浅谈提高Django性能

    Django性能优化是一件困难的事情,但是也不常常如此: 下面4步将能够轻松的提高你的网站的性能,它们非常简单你应该将它们 作为标配. 持久化数据库连接 django1.6以后已经内置了数据库持久化连 ...

  9. openlayers研究

    openlayers研究 待定........ 在 url encode 中 + 和 %20 都表示空格, encode(+)会变成空格 如果要传 + 这个字符需要转义 1. +  URL 中+号表示 ...

  10. AndrewNG Deep learning课程笔记 - CNN

    参考, An Intuitive Explanation of Convolutional Neural Networks http://www.hackcv.com/index.php/archiv ...