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

在 Vue 中，v-bind=“$attrs"和v-on="$listeners” 是两个非常有用的指令，常用于组件之间的属性和事件传递。以下为你详细解释：

1. v-bind=“$attrs”
   $attrs是一个包含了父组件传递给子组件的所有非props属性的对象。这里所说的非props属性，就是指那些没有在子组件的props选项中定义的属性。借助v-bind="$attrs" 指令，能够把这些非 props 属性自动绑定到子组件的根元素上。
   下面是一个简单示例：

<!-- 父组件 -->
<template>
  <ChildComponent msg="Hello" id="child" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

<!-- 子组件 -->
<template>
  <div v-bind="$attrs">
    <!-- 这里会自动绑定父组件传递的非 props 属性 -->
  </div>
</template>

<script>
export default {
  props: []
};
</script>

在上述示例里，父组件向子组件传递了 msg 和 id 两个属性。由于子组件的 props 选项为空，所以 msg 和 id 都属于非 props 属性，它们会被绑定到子组件的根元素

<!-- 父组件 -->
<template>
  <ChildComponent @click="handleClick" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Clicked!');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button v-on="$listeners">Click me</button>
</template>

<script>
export default {};
</script>

在这个例子中，父组件给子组件传递了一个 click 事件监听器。子组件通过 v-on=“$listeners"把这个事件监听器绑定到了<button>元素上，这样当按钮被点击时，父组件的handleClick方法就会被调用。3.Vue3中的变化在Vue3里，$listeners 被移除了，因为所有的事件监听器现在都被包含在 $attrs中。因此，在Vue3里只需使用v-bind="$attrs” 就能同时传递属性和事件监听器。示例如下：

<!-- 父组件（Vue 3） -->
<template>
  <ChildComponent msg="Hello" @click="handleClick" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
const handleClick = () => {
  console.log('Clicked!');
};
</script>

<!-- 子组件（Vue 3） -->
<template>
  <button v-bind="$attrs">Click me</button>
</template>

<script setup>
defineProps({});
</script>




在这个 Vue 3 的示例中，msg 属性和 click 事件监听器都会通过 v-bind="$attrs" 被传递到子组件的 <button> 元素上。