1.$attrs
【场景】:我们在使用组件的过程中,有时需要给被封装的子组件传递Prop。如果每一个Prop,都需要父组件声明再一个一个传递给子组件,就太麻烦了
【运用】:
【注意】:vue会将组件被转入但未声明的prop作为HTML属性绑定到组件的根元素上,所以可以将组件的inheritAttrs选项设置为false来避免这种行为。
2.$listeners
【场景】:如何事件处理函数传递给子组件
【运用】:可以利用父组件实例上的$listeners属性
【注意】:当父组件和子组件同时触发了同名事件时,处理函数会执行两次,这里子组件接收了两个xx的事件处理函数,一个是由父组件转发进去的,另一个是父组件内声明并传入的方法,父组件声明的方法中,又调用了父组件的xx事件,因此又触发了第二次事件处理函数,所以使用了$listeners后,就不需要再触发父组件的事件。
3.$slots
【场景】:如果我们想对外暴露子组件的插槽,该怎么做呢?
【运用】:我们可以通过在模板中遍历$slots属性,在子组件中循环插入提供给父组件的插槽内容
【搭配使用】:如果我们也想传递作用域插槽,可以搭配$scopedSlots属性一起使用
4.$props validator
5.暴露子组件方法
【场景】:如果我们想要调用组件方法,一般会用ref获取组件的实例,然后使用this.$refs.xxx进行调用,但在封装子组件后,如果不对子组件的方法进行暴露,调用时,我们往往需要通过ref,先获取父组件实例,再获取子组件实例,这种方式导致组件代码难以维护。 【运用】:我们可以在父组件中,提供子组件的同名方法,对外暴露,让使用者只通过父组件就可以进行调用。