初识组件--全局注册\局部注册
一个由于找不到工作而进化成 金针菇级别 癫疯前端汪。风来雨来卷起来。
Vue组件快速学习-粗识组件
- 前言
- 全局组件：
- 一、全局组件-注册方法1-远古秘方
- 1.调用Vue.extend方法，传入目标格式对象
- 2.调用Vue.component，注册全局组件
- 二、全局组件-注册方法2-语法糖秘方
- 1.直接调用Vue.component方法，传入Vue.extend参数所需格式的对象，完成组件注册
- 三、全局组件-注册方法3-template标签-以及远古秘方与语法糖糅合
- 1.在html标签中定义template
- 2.简约定义Vue.extend对象，调用Vue.component完成注册
- 四、 全局组件总结：
- 局部组件：
- 一、局部组件-注册方法-粗鲁-Vue实例中的component直接传Vue.extend对象
- 1.添加component对象，传入Vue.extend格式的对象
- 一、局部组件-注册方法2-精细-Vue.extend对象的数据事先定义好再传
- 1.外部制作好Vue.extend参数所需格式对象，然后传入实例中的component中
- 总结
前言
众所周知，现今企业中的前端开发，不是光会大学里的HTML、CSS、JavaScript就可以上手的。前端早已跨过了刀耕火种的时代，各种框架层出不穷，打开招聘网站，月薪三千块的岗位都要求会Vue。因此要想吃上前端开发这口饭，就至少得学会Vue.js。
本文梳理Vue组件的使用，乃Vue学习的第二大关。
使用组件的好处：组件能实现复杂的页面结构，提高代码的可复用性，减少重复代码的编写，提高开发效率，降低代码之间的耦合度，使得项目更易于维护和管理。
提示：以下是本篇文章正文内容，下面案例可供参考
全局组件：
一、全局组件-注册方法1-远古秘方
使用到：Vue.extend、Vue.component、template。
1.调用Vue.extend方法，传入目标格式对象
代码如下（示例）：
const cpn1 = Vue.extend({template:`<div><h2>我是组件cpn1</h2><button v-on:click="count++">被单击{{count}}次</button></div>`,data() {return {count: 0,};},});
注意：data必须是一个方法，并且用return返回数据。：
2.调用Vue.component，注册全局组件
代码如下（示例）：
Vue.component("cpn1",cpn1);
运行结果如下（示例）：
至此，一个全局组件已经注册成功。(注：该注册方法过于古老，现今官方文档和各种资料都使用一种全新的语法糖简约注册)
二、全局组件-注册方法2-语法糖秘方
使用到：Vue.component、template。
1.直接调用Vue.component方法，传入Vue.extend参数所需格式的对象，完成组件注册
代码如下（示例）：
Vue.component('my-component',{data() {return {count: 0,};},template: `<div><h2>我是组件cpn1</h2> <button v-on:click="count++">被单击{{count}}次</button></div>`,});
运行结果如下（示例）：
使用改方法，直接省略调用Vue.extend步骤，但其实内部还是会调用Vue.extend来实现。
使用该方法，一步到位，十分方便，但是代码依旧不够简洁，我们接着看下去。
三、全局组件-注册方法3-template标签-以及远古秘方与语法糖糅合
使用到：Vue.component、template标签。
1.在html标签中定义template
代码如下（示例）：
<template id="cpn3"><div><h2>我是全局组件cpn3</h2><button v-on:click="count++">被单击{{count}}次</button></div></template>
随后 可以在js中通过id找到该模板。好处：使用该标签非常方便书写html标签。（注意：template标签中需要用一个div作为根将标签包裹起来）
使用到：Vue.component、template。
2.简约定义Vue.extend对象，调用Vue.component完成注册
由于在Vue.component中直接书写对象使得代码复杂不具备可读性，因此事先将对象在外先定义好在传进去，代码如下（示例）：
const cpn3={template:'#cpn3',data() {return {count: 0,};}}Vue.component('cpn3',cpn3);
运行结果如下（示例）：
使用该方法，既方便template模板的书写，又省去了Vue.extend的调用。保证了代码的美观，可阅读性。
四、 全局组件总结：
1、template模板在html中用template标签定义好。
2、Vue.extend写起来麻烦，直接用语法糖解决，即直接在js代码中定义格式一样的对象。
3、最终全局注册都调用Vue.component方法。
局部组件：
一、局部组件-注册方法-粗鲁-Vue实例中的component直接传Vue.extend对象
使用到：component、template。
1.添加component对象，传入Vue.extend格式的对象
代码如下（示例）：
const app=new Vue({el:'#app',data: {message:"hello Vue"},methods:{},components:{cpn1:{template:`<div><h2>我是局部组件cpn1</h2><button v-on:click="count++">被单击{{count}}次</button></div>`,data() {return {count: 0,};},}}})
注意：data必须是一个方法，并且用return返回数据。：
一、局部组件-注册方法2-精细-Vue.extend对象的数据事先定义好再传
使用到：component、template。
1.外部制作好Vue.extend参数所需格式对象，然后传入实例中的component中
代码如下（示例）：
const cpn2={template:`<div><h2>我是局部组件cpn2</h2><button v-on:click="count++">被单击{{count}}次</button></div>`,data() {return {count: 0,};},}const app=new Vue({el:'#app',data: {message:"hello Vue"},methods:{},components:{cpn2:cpn2}})
总结
组件注册都用到component方法，该方法里面包含template、data。其中template可以用template标签写，然后利用id引用；而data必须是一个函数，函数用return返回数据。
细节的人事先定义好Vue.extend()参数所需格式对象，然后再给到component。此乃金针菇前端汪。
全局组件和局部组件的区别在于：全局调用Vue.component，而局部调用的是Vue实例中的component
初识组件--全局注册\局部注册相关推荐
- Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 4.组件化开发 4.1.组件的注册 全局注册 局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
- vue中全局注册和局部注册
全局注册 //在main.js中全局注册 import Vue from 'vue'//导入在components中创建的复用组件 import pageTools from '@/component ...
- 组件命名方式||局部组件注册：局部组件只能在注册他的父组件中使用
组件命名方式 组件注册注意事项 如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是 在普通的标签 ...
- 【视频】vue组件的局部注册
P12vue组件的局部注册 https://www.bilibili.com/video/av91679349?p=12
- vue 组件 全局组件和局部组件component
1.全局组件 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
- vue中定义组件 components（局部 / 全局）
1. 基本信息 组件是对你 html 标签的一个拓展 组件里面的内容就是你模板的内容 组件分为全局组件和局部组件 对象当中定义的组件都是局部组件 2. 如何定义(注册)组件 定义组件需要使用compo ...
- 注册中心—注册中心原理
在微服务架构中,注册中心是最核心的基础服务之一,本文将详细介绍下注册中心的组成部分和它们之前的关系. 目录 一.注册中心原理 二.注册中心功能 三.常见的注册中心 一.注册中心原理 注册中心主要涉及到 ...
- php ado 建立注册,如何注册ADO与DAO [Access软件网]
正 文: 用Access数据库制作过程中会遇到 ActiveX 组件无法创建对象等错误提示,此问题是由于有的OFFICE用户可能ADO2.1和DAO3.6没有注册,手动注册的方法如下: 一.注册ADO ...
- VC检测OLE控件是否已经注册,并注册它
如果OLE控件不存在的话,在 try { HRESULT hr; hr = ::CoInitializeEx( Null, COINIT_APA ...
- [转载]内存分配 知识,全局，局部，静态变量
[转载]内存分配 知识,全局,局部,静态变量 预备知识-程序的内存分配 一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)- 由编译器自动分配释放 ,存放函数的参数值,局部变 ...
最新文章
- 【Netty 】Netty fireChannelRead用法
- fping的使用方法
- c语言怎么在win7上运行,C语言做的中国象棋，分享，问怎么在WIN7下运行
- c语言 srand time 0,c++ 随机数 srand(time(0)) 用法 | 求索阁
- swagger-bootstrap-ui 1.9.3 发布，i18n及自定义文档支持
- 计算机组成原理xchg,8088数据传送指令-计算机组成原理与汇编语言-电子发烧友网站...
- 化工计算机软件基础考试题,化工原理模拟试题（一）及答案.doc
- DALSA相机开发记录（01）
- ubuntu修改系统时区和jvm时区
- 【调音小栈】跳羚PRO12PRO22声卡搭载机架跳线设置教程
- python socket编程实例代码（含服务端和客户端）
- NetSarang旗下网络通讯系列产品v5版本更新合集丨附下载
- Java静态代理详解
- 移动热修复Sophix之初体验
- sql更新语句中update set from用法
- Unity 贴图Meta文件的探究
- 哪里有电，哪里就应该有网络 ，华为移动路由Pro评测
- 【C语言】从字符串中提取IP地址最简洁的方法
- 全球与中国萃取塔市场现状及未来发展趋势（2022）
- NOIP模拟赛 麻将