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. Java低配版简单的随机点名系统

    import java.util.*; public class Dome{ public static void addSname(String[] students){ Scanner sc = ...

  2. [20190524]DISABLE TABLE LOCK(12c).txt

    [20190524]DISABLE TABLE LOCK(12c).txt --//如果禁止table lock时,一些ddl操作会被禁止.但是我有点吃惊的是增加字段不受限制.--//链接:http: ...

  3. 访问rabbitmq-server失败

    测试项目正常运行突然访问不了,各项目启动失败,查看日志发现是RabbitMQ拒绝连接. 重启后依然失败,看var/log/rabbitmq/startup_err 发现什么错误信息也没有,后查看磁盘空 ...

  4. mysql判断是否包含某个字符的方法和修改表中指定字段

    用locate 是最快的,like 最慢.position一般实战例子:select * from historydatawhere locate('0',opennum) and locate('1 ...

  5. 抓包工具 tcpdump 用法说明

    tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上. 不带任何选项的tcpdump,默认会抓取第一个网络接口,且只有将tcpdump进程终止才会停止抓包. 例如: ...

  6. Shell命令-搜索文件或目录之whereis、locate

    文件及内容处理 - whereis.locate 1. whereis:查找二进制命令,按环境变量PATH路径查找 whereis命令的功能说明 whereis 命令用于查找文件.该指令会在特定目录中 ...

  7. Vysor

    官网:http://www.vysor.io/ Vysor用 PC远程控制投影安卓手机/平板工具 Vysor 是一个免费的google浏览器插件. 它可以让你在pc上控制你的Android手机.平板等 ...

  8. python语法区别

    python语法区别: 大小写敏感 (动态语言:python)变量不用声明 p.s: 静态语言(Java)必须声明变量 语句末尾可以不打分号 可以直接进行数学计算 复制.粘贴功能失效,粘贴到别的地方的 ...

  9. 1.Java基础_Java核心机制简介

    Java的两种核心机制 Java虚拟机机制 Java垃圾回收机制 解释名词 J2SDK&JRE: J2SDK=JDK=Software Development Kit(软件开发包) JRE=J ...

  10. pycharm安装pymysql包

    1.为什么? 每个程序连接数据库,python开发2.*版本可以直接使用MySQL,python3.*版本需要下载使用PyMySQL包才能连接数据库... 2. 怎么做? 2.1. 更改源:pycha ...