Vue组件化开发较为常用的使用技巧

技巧

$attrs

v-bind="$attrs" 子组件使用v-bind="$attrs"可以将父组件所有传递、但子组件未在props中定义的属性绑定给子组件，inheritAttrs: false（与name同级）可以避免将属性绑定到非目标组件上

$listeners

v-on="$listeners" 子组件使用v-on="$listeners"可以将父组件传递给子组件的所有事件绑定给子组件。提示：如果子组件绑定了同名事件，那么将触发两次

$slots

<slot v-for="slotName in $slots" :name="slotName" :slot="slotName">

$slots包含了父组件通过slot="xxx"传递的所有slot名称，通过遍历，可以插入父组件传递的所有插槽内容，:slot="slotName"如何是其他子组件的插槽内容，会将该插槽内容继续传递给他的子组件

类似的：$scopedSlots

<template v-for="slotName in $scopedSlots">
	<slot :name="slotName" v-bind="slotProps"></slot>
</template>

...

~~~

类似的：\$scopedSlots
~~~html
<template v-for="slotName in $scopedSlots">
	<slot :name="slotName" v-bind="slotProps"></slot>
</template>
~~~

props有值验证函数

props: {
	xxx: {
		type: ...,
		required: ...,
		default: ...,
		validator: prop => [1, 2, 3].includes(prop),  // 返回false时，console会报错提醒
	}
}

$refs

$refs.xxxComp.childFn() 可以通过该方式调用子组件方法，同时支持在method中进行接力传承。

// 父：
this.$refs.xxxComp.focus()

// 子：
methods: {
	focus(){
		this.$refs.xxxComp2.focus()
	}
}