Vue2.x -- 自定义指令componentUpdated作用、子组件主动修改父组件传值、父组件使用子组件方法、统一注册全局组件

vue自定义指令配置中componentUpdated作用

Vue.directive('name', {
	//	组件插入指令时执行
	inserted(el,options){
		el.value = option
	},
	//指令所在组件的 VNode 及其子 VNode 全部更新后调用
	componentUpdated(el,option){
		el.value = option
	}
})

子组件发出事件主动修改父组件props传值

语法:this.$emit('update:值的名称',新的值)

props:{
	show:{
		type:Boolean,
		default: false
	}
}

this.$emit('update:show',true)

//父组件传值时要加上sync
<show-component :show.sync="false">

父组件使用子组件的方法

获取dom元素后直接用.语法即可
如子组件中methods中有getDetail()方法
子组件ref为child
父组件中

this.$refs.child.getDetail()

统一注册组件

// components/index.js
import CompOne from '@/CompOne'
import CompTwo from '@/CompTwo'

export default {
	install(Vue){
		Vue.component('CompOne ',CompOne),
		Vue.component('CompTwo',CompTwo)
	}
}

//main.js

import Component from '@/components'
Vue.use(Component)

//因为导出的默认数组中有install安装命令,vue会自动识别并安装

额外查漏补缺:

• JS的find方法

在数组中查找某个符合条件的元素,并返回第一个符合条件的元素,如果没找到会返回undefined
语法:
array.find(function(currentValue, index, arr),thisValue)
其中currentValue为当前项，index为当前索引，arr为当前数组

let res = [1,2,3,4,5]
const a = res.find(item => item > 3)
console.log(a) // 4