Vue常用方法总结

场景一：页面需要导入多个组件；

vue2

//在javaScript代码中，使用path模块处理路径，则需要先导入它。
const path = require('path');
const files = require.context('@/components',false,/\.vue/);
const modules = {};
files.keys().forEach(key =>{
// path.basename() 用来从路径字符串中，将文件名解析出来
	const name = path.basename(key,'.vue');
	modules[name] = files(key).default || files(key);
})
'''
components:modules

扩展一：path的路径模块

path模块是Nodejs官方提供的，用来处理路径的模块，他提供一系列的方法和属性，用来满足用户对路径的处理需求。

• 路径拼接 path.join([…pahts]);
  可以将多个路径片段拼接为完整的路径字符串；
  • __dirname 用来动态获取当前文件夹所属目录在这里插入代码片绝对路径；
  • __filename 用来动态获取当前文件的绝对路径；
  • …/ 会抵消前面一个路径；
  • path.join(‘/a’,‘/b/c’,‘…/’,‘/d’,‘e’);// \a\b\d\e;
• path.basename(path[,ext]);
  可以获取路径中的最后一部分，经常通过这个方法获取路径中的文件名。
  • path必选参数，表示一个路径的字符串
  • ext可选参数，表示文件扩展名
  • path.basename(‘./index.vue’,'.vue);//index
• path.extname(path);
  可以获取路径中的扩展名部分。
  • path必选参数，表示一个路径的字符串；
  • 返回得到的扩展名字符串。path.extname(‘/a/b/c/index.html’);// .html

扩展二 ：

require.context(direcory,useSubdirectories,regExp);

• direcory :说明需要检索的目录，绝对路径或者相对路径；
• useSubdirectories:是否检索子目录；
• regExp:匹配文件的正则表达式，通常为文件名；// /.vue/；

vue中的组件通信

• props && $emit

props:{
	inputVal:{
		type:Number,//类型
		default:200,//默认值
		required:true,//是否必传
		validator:(value）{
		//该值必须匹配下列字符串中的一个
		return ['success','warning','danger'].indexOf(value)!=-1
		}
	}

}

• vueX
  一个状态管理工具，是一个独立的插件，适合数据共享多的项目
  • state;定义储存数据的仓库，通过this.$store.state或者mapState访问
  • getter；可以认为是state的计算属性，可通过this.$store.getter或者mapGetter访问；
  • muutaton；同步修改state，通过mapMutation调用；
  • action；异步调用函数执行mutation进而改变store的值，可通过this.$dispatch或者mapActions访问；
  • modules:拆分模块，便于管理，最后在入口处结构引入；
• attrs && listeners （不常用）
  • attrs;用来获取父传子中未在props定义的值；this.$attrs;
  • listeners;场景：子组件需要调用父组件的方法解决；
• provide && inject
  • 场景：允许一个祖先组件向其子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
• v-slot
  • 匿名插槽（默认插槽）；没有命名，有且只有一个；

	// 父组件
	<comonent-aitem>
		<template v-slot:default>
			....任意内容。。。
		</template>
	</component-aitem>

//子组件
<slot>我是默认插槽</slot>

• 具名插槽：相对与匿名插槽组件slot标签带name命名的；

// 父组件
	<comonent-aitem>
		<template v-slot:todo>
			....任意内容。。。
		</template>
	</component-aitem>

//子组件
<slot name='todo'>我是默认插槽</slot>

• 作用域插槽：子组件内数据可以被父组件拿到（解决了数据只能从父组件到子组件传递）

// 父组件
	<comonent-aitem>
		<template v-slot:todo = 'slotProps'>
			....任意内容。。。
			{{slotProps.user.firstName}}
		</template>
	</component-aitem>
	// slotProps 可随意命名
	// slotProps 接取的是子组件标签slot上属性数据的集合
	
// 父组件
<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.age}}
 </template>
</todo-list>
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

// 子组件
<slot name="todo" :user="user" :test="test">
    {{ user.name }}
 </slot>
 data() {
    return {
      user:{
        name:"小花",
        age:16
      },
      test:[1,2,3,4]
    }
  },

• EventBus事件总线；$emit,$on

// 在 main.js
Vue.prototype.$eventBus=new Vue()

// 传值组件
this.$eventBus.$emit('eventTarget','这是eventTarget传过来的值')

// 接收组件
this.$eventBus.$on("eventTarget",v=>{
  console.log('eventTarget',v);//这是eventTarget传过来的值
})

自定义指令

vue2
//注册局部指令：组件中接收directives
directives:{
	focus:{
		inserted:function(el){
			el.focus();
		}
	}
}
//注册全局指令:
Vue.directives("focus",{
	inserted(el,binding){
		el.focus();
	}
})
//钩子函数
bind:第一次绑定到元素时调用，可以进行一次性的初始化
inserted:被绑定元素插入到父元素时进行调用，（仅保证父元素存在，不保证已插入文档中）
update:
componentUpdate:
unbind:
//参数
[el,binding,vnode,oldVnode]
el:指令所绑定的元素，可直接操作dom
bindding:{
	name://指令名
	value://指令绑定的值
	oldValue:
	expression:字符串形式的指令形式
	vnode://指令传的参数
	modifiers://一个包含修饰符的对象
}
vnode:
oldVnode:

//directive.js:
import directive from './directives';
export const importDrective = (Vue)=>{
	Vue.directive("指令名",directive.**)
}
//main.js
import {importDrective } from './directive';
importDrective(Vue)