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单例写到C++单例

    设计模式中,单例模式是常见的一种.单例模式需要满足以下两个条件: 保证一个类只能创建一个示例: 提供对该实例的全局访问点. 关于单例最经典的问题就是DCL(Double-Checked Lock),今 ...

  2. Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  3. Mysql—事务原理与详解

    事务的四大特性 事务的隔离级别 https://www.cnblogs.com/57rongjielong/p/8036418.html https://blog.csdn.net/zwq123211 ...

  4. [PHP] 深度解析Nginx下的PHP框架路由实现

    所有的框架处理业务请求时,都会处理URL的路径部分,分配到指定的代码中去处理.实现这一功能的关键就是获取$_SERVER全局变量中对于URL部分的数据 当请求的路径为http://test.com/a ...

  5. 设备树处理之——device_node转换成platform_device【转】

    转自:https://www.cnblogs.com/downey-blog/p/10486568.html 以下讨论基于linux4.14,arm平台 platform device 设备树的产生就 ...

  6. 解决N个人过桥时间最短问题（Java版本）

    [问题描述] n个人要晚上过桥,在任何时候最多两个人一组过桥,每组要有一只手电筒.在这n个人中只有一个手电筒能用,因此要安排以某种往返的方式来返还手电筒,使更多的人可以过桥.   注意:每个人的过桥速 ...

  7. AtCoder Beginner Contest 145

    传送门 A - Circle 签到. B - Echo 签到到. C - Average Length 要卡下精度,可用二分或者long double来搞. Code /* * Author: hey ...

  8. 天翼宽带家庭网关用户：useradmin，nE7jA%5m 这个是中国电信的超级密码

    天翼宽带家庭网关用户:useradmin,nE7jA%5m 这个是中国电信的超级密码

  9. 【转】java爬虫，爬取当当网数据

     背景:女票快毕业了(没错!我是有女票的!!!),写论文,主题是儿童性教育,查看儿童性教育绘本数据死活找不到,没办法,就去当当网查询下数据,但是数据怎么弄下来呢,首先想到用Python,但是不会!!百 ...

  10. MySQL学习笔记7——约束

    约束 约束 *约束是添加在列上的,用来约束列的! 1.主键约束(唯一标识) ***非空*** ***唯一*** ***被引用*** *当表的某一列被指定为主键后,该列就不能为空,不能有重复值出现. * ...