1、全局组件：Vue.component('标签名', 构造器名)

Vue.component('mycpn', cpnC)

注：这种注册组件的方式是全局组件，可以在多个Vue实例中使用。

2、局部组件：components:{标签名,构造器名}

components: {

                mycpn: cpnC

            }

注：这种注册组件的方式是局部组件，只能在注册这个组件的Vue实例中使用。

*******完整代码******‘

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

</head>

<div id="app">

    <mycpn />

</div>

<div id="app2">

    <mycpn />

</div>

<body>

    <script>

        const cpnC = Vue.extend({

            template: `

                <h2>全局组件，可以在多个Vue实例中使用</h2>

            `

        })

        // Vue.component('mycpn', cpnC)

        //这种注册组件的方式是全局组件，可以在多个Vue实例中使用。

        let vm = new Vue({

            el: '#app',

            components: {

                mycpn: cpnC

            }

            //这种注册组件的方式是局部组件，只能在注册这个组件的Vue实例中使用。

        })

        let vm2 = new Vue({

            el: '#app2'

        })

    </script>

</body>

</html>

注：实际开发中，只有一个Vue实例，常用的组件是局部组件

vue -全局组件和局部组件的更多相关文章

  1. vue.js中的全局组件和局部组件

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

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

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

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

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

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

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

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

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

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

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

  7. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

  8. vue（3）—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  9. Vue组件之全局组件与局部组件

    1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...

随机推荐

  1. Spring Cloud Netflix Hystrix介绍和使用

    前面我们搭建了具有服务降级功能的Hystrix客户端,现在我们来详细了解下Hystrix的一些功能. Hystrix的意思是豪猪,大家都知道,就是长满刺的猪...实际上,它表明了该框架的主要功能:自我 ...

  2. bayaim_hadoop1_2.2.0伪分布式搭建

    ------------------bayaim_hadoop1_2.2.0伪分布式搭建_2018年11月06日09:21:46--------------------------------- 1. ...

  3. windows双网卡绑定

     windows双网卡绑定                                            开门贱山:  以下内容纯属抄袭,如有雷同,也是醉了~~!! ————————————— ...

  4. Struts的增删改查

    1.导入相关的pom依赖(struts.自定义标签库的依赖) pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0&quo ...

  5. 面向过程编程&面向对象编程

    面向过程编程 Procedure Oriented Programming C语言是面向过程编程的,面向过程编程主要使用顺序.条件选择.循环三种基本结构来编写程序. 顺序:按照时间轴顺序完成每个处理: ...

  6. Linux通过端口号查看使用进程-结束进程

    1. 查看进程(参数带 - 与不带有区别): command [options] 例:ps  -a(配合其他options参数以展示进程更多参数) ps -ef | grep 进程名(返回值是该进程的 ...

  7. C++ STL priority_queue 优先队列

    优先队列: 与队列的用法是一样的,优先队列内部是通过堆来排序实现的, #include<iostream> #include <queue> using namespace s ...

  8. 【转】Redis常见面试题

    介绍:Redis 是一个开源的使用 ANSI C 语言编写.遵守 BSD 协议.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的 API的非关系型数据库. 传统数据 ...

  9. django内容回顾：

    Django 下载安装 命令行 pip install django==1.11.26 -i 源 pycharm 创建项目 命令行 django-admin startproject 项目名 pych ...

  10. 43 树莓派安装pytorch

    狗狗 https://www.pytorchtutorial.com/pytorch-c-api-4-cat-dog-classifier-2/ 鲜花分类器 https://www.pytorchtu ...