526互联

v-bind="$attrs" v-on="$listeners"

发布时间 2023-10-19 15:38:34作者: hello芳芳

v-bind="$attrs"

主要用于组件之间的隔代传值。例如有 父组件A，子组件B，孙组件C 三个组件。
A组件中的值需要直接传给C，那么就需要在B中设置v-bind="$attrs"，然后在C组件中用prop接收，此时就直接把值传给了C组件。
父组件A

<template>
  <B_zujian  msg='123'/>
</template>

子组件B

<template>
   <C_zujian v-bind="$attrs"/>
</template>

孙组件C

<template>
  <div>A传递过来的值:{{msg}}</div>
</template>
 
<script>
export default {
  name: 'c_zujian',
  props: {
    msg:{ //接收A组件传递的值 msg
      typeof:String,
      default:''
    }
  },
}
</script>

v-on="$listeners"

主要用于底层组件向高层组件传递信息。
如有 父组件A，子组件B，孙组件C 三个组件，如果C传递信息给B则可直接使用emit，如果是C向A传递信息还使用emit,则就需要C先emit给B，B再emit给A，这种方式比较麻烦。
此时可以使用v-on="$listeners"来满足当前需求。

C组件

<template>
  <div @click="hanleClick">C组件</div>
</template>
 
hanleClick(){
  this.$emit("transmitNews",'123')
}

B组件

<template>
  <c_zujian v-on="$listeners"/>
</template>

A组件

<template>
  <b_zujian @transmitNews='jieShouTransmitNews'/>
</template>
 
methods:{
  jieShouTransmitNews(val){
    console.log(val) //123
  }
}
  1. 总结：
    1、这可以理解成穿透，多层组件监听
    2、用于多层级组件之间的通信
    3、高层级向底层级传值 v-bind="$attrs"

4、低层级向高层级传值 v-on="$listeners"