vue 创建组件、组件选项、require.context全局自动注册组件

雨点打透心脏的1/2处 2021-07-24 16:31 427阅读 0赞

非脚手架环境：
    	根实例:
    		new Vue({
    		  el: '#app',
    		  router,
    		  data: {
    		    name:'jeff'
    		  },
    		  components: { App },
    		  template: '<App :name="name" />'
    		})
    	组件:
    		Vue.component('App',{
    			data(){		组件的data选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝
    				return{
    					
    				}
    			},
    			...
    		})
    
    组件选项:
    export default{
    	delimiters:["{
       {", "}}"],  改变纯文本插入解析分隔符{
       {}},只在完整构建版本中的浏览器内编译时可用。
    	functional:true,	使组件无状态(没有data)和无实例(没有this上下文),他们用一个简单的render 函数返回虚拟节点使它们渲染的代价更小。
    		搭配函数式组件使用
    	model:{prop:string, event: string }	自定义v-model使用
    	inheritAttrs:false,	搭配给属性绑定自定义位置使用
    	comments:true, 	会保留且渲染模板中的HTML注释,默认行为是舍弃它们。
    		这个选项只在完整构建版本中的浏览器内编译时可用。
    	
    }	
    脚手架环境:
    	
    	1、在src的components下创建xx.vue文件
    		<template lang='html'>
    			<div>
    				template内只能存在一个根容器
    			</div>
    		</template>
    
    		<script>
    		export default{
    			name:'xxx',
    			data(){
    				return{
    					xx
    				}
    			}
    		}
    		</script>
    		<style lang='css' scoped>	lang:使用的预编译器语言,scoped:表示样式只作用于当前组件
    
    		</style>
    
    	2、在App.vue主入口文件的引入
    		(1)script中引入该组件地址
    		(2)在components中引入该组件名
    		(3)在template中<组件名/>使用
    			首字母大写命名定义一个组件时MyComponentName
    			 <my-component-name> 和 <MyComponentName> 都是可接受的。
    			 直接在DOM(即非字符串的模板)中使用时只有 kebab-case 是有效的。
    			 
    	3、可以把JavaScript、CSS分离成独立的文件然后做到热重载和预编译
    		<template>
    		  ...
    		</template>
    		<script src="./my-component.js"></script>
    		<style src="./my-component.css"></style>
    
    全局自动注册组件
    	import Vue from 'vue'
    	import upperFirst from 'lodash/upperFirst'
    	import camelCase from 'lodash/camelCase'
    	
    	const requireComponent = require.context(
    	  './components',			其组件目录的相对路径
    	  false,	 				是否查询其子目录
    	  /Base[A-Z]\w+\.(vue|js)$/	匹配基础组件文件名的正则表达式
    	)
    	
    	遍历文件路径
    	requireComponent.keys().forEach(fileName => {
    	  获取组件配置,和导入文件相同
    	  	文件中的export 导出结果为{x:xx,...}
    		文件中的export default 导出结果为{default:xx}
    	  const componentConfig = requireComponent(fileName)	
    	
    	  获取组件的 PascalCase(驼峰写法)命名,
    	  const componentName = upperFirst(  转化为首字母大写
    	    camelCase(	转换为驼峰写法
    	       获取和目录深度无关的文件名,即只获取文件名用来注册组件
    	      fileName	
    	        .split('/')
    	        .pop()
    	        .replace(/\.\w+$/, '')	去掉文件后缀
    	    )
    	  )
    	
    	  全局注册组件
    	  Vue.component(
    	    componentName,
    	    如果这个组件选项是通过 `export default` 导出的，
    	    那么就会优先使用 `.default`，
    	    否则回退到使用模块的根。
    	    componentConfig.default || componentConfig	每个组件中export default导出的配置
    	  )
    	})