vue -全局组件和局部组件
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 -全局组件和局部组件的更多相关文章
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
- VUE3 之 全局组件与局部组件
1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> < ...
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
随机推荐
- Python—版本和环境的管理工具（Pipenv）
pipenv简介 虚拟环境本质是一个文件,是为了适应不同的项目而存在.pipenv相当于virtualenv和pip的合体. 整合了 pip+virtualenv+Pipfile,能够自动处理好包的依 ...
- Mysql—数据备份与恢复
数据备份 # 备份单个数据库 [root@localhost ~]# mysqldump -h主机名 -u用户名 -p密码 数据库名字 > 备份的数据库名字.sql [root@localhos ...
- 海思Hi3519A MPP从入门到精通（二 系统控制）
系统控制根据 Hi35xx 芯片特性,完成硬件各个部件的复位.基本初始化工作,同时负责完成 MPP(Media Process Platform 媒体处理平台)系统各个业务模块的初始化.去初始化以及管 ...
- 修改postgresql 密码
sudo -u postgres psql -c "alter user postgres password '123456';"
- Mybatis逆向工程中的 mybatis-generator:generate 代码生成器的使用
使用逆向工程可以根据数据库的表名字生成pojo层(实体类),mapper层(dao层,直接与底层的XML中映射相关),XML(映射执SQL语句) 下面请看具体生成步骤 1. 点击generatorCo ...
- 利用开源软件自建WAF系统--OpenResty+unixhot
目录 介绍 安装Openresty 修改nginx.conf 部署WAF 测试WAF 简介:利用OpenResty+unixhot自建WAF系统 介绍 OpenResty是一个基于 Nginx 与 ...
- nginx代理ambassador，再转到mlfow-tracking服务
这个服务的代理,相对于服务网关来说,有些典型, 今天调通了,作个记录. 一,nginx配置 upstream ai_ambassador { ip_hash; server 1.2.3.4:30080 ...
- c# 第38节 接口的实现
本节内容: 1:接口的两种实现是什么 2:隐式实现接口的说明 3:为什么有显式 以及显式声明格式 4:实现显式接口 1:接口的两种实现是什么 隐式实现接口:(当继承的父类直接没有相同的方法时) 即可用 ...
- 机器学习之感知器和线性回归、逻辑回归以及SVM的相互对比
线性回归是回归模型 感知器.逻辑回归以及SVM是分类模型 线性回归:f(x)=wx+b 感知器:f(x)=sign(wx+b)其中sign是个符号函数,若wx+b>=0取+1,若wx+b< ...
- 【前端知识体系-JS相关】ES6专题系列总结
1.如何搭建ES6的webpack开发环境? 安装Node环境 node -v // 10.14.1 安装NPM环境 npm -v // 6.4.1 安装babel npm install @babe ...