详解详解vue 组件注册组件注册
一、了解组件注册的两种方式一、了解组件注册的两种方式
1.1 全局组件的注册方法
//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
let Hello = {
name: 'hello',
template: '这是全局组件hello'
}
Vue.component('hello', Hello)
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
上面我们就通过Vue.component()注册了一个全局组件hello，接下来分析源码实现的时候也是基于这个例子来进行的。
1.2 局部组件的注册
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components:{
HelloWorld
}
}
</script>
像这样就注册了一个HelloWorld的局部组件。
二、全局组件注册的源码二、全局组件注册的源码
1.Vue初始化的时候，会调用initGlobalAPI()
//【代码块1】
//代码所在文件：src/core/global-api/index.js
export function initGlobalAPI(Vue: GlobalAPI){
//...省略其他无关代码
initAssetRegisters(Vue)
//这个方法就是用于组件注册的方法
}
2.在initAssetRegisters()方法中执行组件的定义
//【代码块2】
//代码所在文件：src/core/global-api/assets.js
export function initAssetRegister(Vue){
ASSET_TYPES.forEach(type=>{
//ASSET_TYPES包括component、directive、filter
Vue[type] = function(id, definition){
//...一些条件判断
if(type === 'component' && isPlainObject(definition)){
definition.name = definition.name || id
资源评论
weixin_38514805
- 粉丝: 9
- 资源: 932
最新资源
- Spring Cloud商城项目专栏 049 支付
- sensors-18-03721.pdf
- Facebook.apk
- 推荐一款JTools的call-this-method插件
- json的合法基色来自红包东i请各位
- 项目采用YOLO V4算法模型进行目标检测，使用Deep SORT目标跟踪算法 .zip
- 针对实时视频流和静态图像实现的对象检测和跟踪算法 .zip
- 部署 yolox 算法使用 deepstream.zip
- 基于webmagic、springboot和mybatis的MagicToe Java爬虫设计源码
- 通过实时流协议 (RTSP) 使用 Yolo、OpenCV 和 Python 进行深度学习的对象检测.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
