组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。

组件的使用有三个步骤：

1、创建组件构造器

2、注册组件

3、使用组件

先来看一段代码：

<!DOCTYPE html>

<html>

    <body>

        <div id="app">

            <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->

            <my-component></my-component>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script>

        // 1.创建一个组件构造器

        var myComponent = Vue.extend({

            template: '<div>我是一个div,我是在组件构造器中创建的</div>'

        })

        // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>

        Vue.component('my-component', myComponent)

        // 3.使用组件，组件应该挂载到某个Vue实例下，否则它不会生效。

        new Vue({

            el: '#app'

        });

    </script>

</html>

访问以下就会发现 ：我们自定义的组件 <my-component>已经换成了我们的组件构造器中的内容了

理解组件的创建和注册：

1、Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例

2、Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要旋绕的HTML

3、使用Vue.component()注册组件时，需要提供两个参数，第一个是组件的标签名，第二个是组件构造器

4、Vue.component()方法内部会调用组件构造器，创建一个组件实例

5、组件应该挂载到某个Vue实例下，否则不会生效。

全局注册和局部注册

调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。
如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。

上面的示例可以改为局部注册的方式：

<!DOCTYPE html>

<html>

    <body>

        <div id="app">

            <!-- 3. my-component只能在#app下使用-->

            <my-component></my-component>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script>

        // 1.创建一个组件构造器

        var myComponent = Vue.extend({

            template: '<div>This is my first component!</div>'

        })

        new Vue({

            el: '#app',

            components: {

                // 2. 将myComponent组件注册到Vue实例下

                'my-component' : myComponent

            }

        });

    </script>

</html>

由于my-component组件是注册在#app元素对应的Vue实例下的，所以它不能在其它Vue实例下使用

<div id="app2">

    <!-- 不能使用my-component组件，因为my-component是一个局部组件，它属于#app-->

    <my-component></my-component>

</div>

<script>

    new Vue({

        el: '#app2'

    });

</script>
如果你这样做了，浏览器会提示一个错误：

可以看出：" Unknown custom element: <my-component> - did you register the component correctly?"

标明组件没有被创建成功，不能调用此组件，也就是说局部组件只能用在其注册的元素挂载下

总结：

全局组件用到的是 Vue.component(tagName,option)

局部组件用到的是components:{tagName:option},tagname是自定义的组件名称,option是组件构造器

/注册组件(全局 component)

Vue.component("my-component",{

    template:'<div>这是一个全局组件测试 </div>'

});

new Vue({

    el:"#app5"

})

//(局部components)

new Vue({

    el:"#app6",

    components:{

        'test-component':{

            template:"<div>这是一个局部的组件测试</div>"

        }

    }

});
 

vue.js中的全局组件和局部组件的更多相关文章

  1. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  2. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  3. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

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

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

  5. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  6. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. VUE注册全局组件和局部组件

    全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg} ...

  8. vue.js 中组件的使用

    Vue中组件的使用 方式一 1.使用Vue.extend创建组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件& ...

  9. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

随机推荐

  1. Java 8新特性探究（二）类型注解和重复注解

    本文将介绍java 8的第二个特性:类型注解. 注解大家都知道,从java5开始加入这一特性,发展到现在已然是遍地开花,在很多框架中得到了广泛的使用,用来简化程序中的配置.那充满争议的类型注解究竟是什 ...

  2. ROS_Kinetic_12 ROS程序基础Eclipse_C++（三）usb camera

    ROS_Kinetic_12 ROS程序基础Eclipse_C++(三)usb camera 软件包下载地址:https://github.com/bosch-ros-pkg/usb_cam 下载后, ...

  3. Web资源认证原理

    Web服务器与浏览器之间的认证流程没有规定的步骤,根据不同的认证模式及鉴权方式可能会有不同的执行步骤.下图用一个最简单的流程了解整个认证过程是如何工作的,首先浏览器向服务器发起请求,然后服务器向浏览器 ...

  4. 【Android】自定义ListView的Adapter报空指针异常解决方法

    刚刚使用ViewHolder的方法拉取ListView的数据,但是总会报异常.仔细查看代码,都正确. 后来打开adapter类,发现getView的返回值为null. 即return null. 将n ...

  5. 程序员的软实力武器-smart原则

    smart对于程序员来说不是仅仅意味一个法则: 面对需求和提出需求时候,smart原则可以极大的提高效率 目标管理是使管理者的工作由被动变为主动的一个很好的管理手段,实施目标管理不仅是为了利于员工更加 ...

  6. STL(标准模板库)理论基础，容器，迭代器，算法

    基本概念 STL(Standard Template Library,标准模板库)是惠普实验室开发的一系列软件的统称.现然主要出现在C++中,但在被引入C++之前该技术就已经存在了很长的一段时间.   ...

  7. 【Qt编程】Qt学习之Window and Dialog Widgets

    Qt Creator 提供的默认基类只要QMainWindow.QWidget和QDialog三种.其中,QMainWindow是带有菜单栏和工具栏的主窗口类,QDialog是各种对话框的基类,这两个 ...

  8. 对FMDB的封装JRDB

    在自己开发中,每次用到数据库都会纠结是使用CoreData还是FMDB.CoreData虽然Api简单,但是调用栈非常复杂,要初始化一个Context需要至少20行代码.显然,对于这种这么恶心的情况, ...

  9. 为什么选择Nginx

     Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性: 作为 Web 服务器:相比 Apache,Nginx 使用更少的资源,支持更多的并发连接,体现更高的效率,这 ...

  10. 【算法编程】基于Miller-Rabin的大素数测试

    基本原理: 费尔马小定理:如果p是一个素数,且0<a<p,则a^(p-1)%p=1.        利用费尔马小定理,对于给定的整数n,可以设计素数判定算法,通过计算d=a^(n-1)%n ...