vue 获取元素额外生成的data-v-xxx操作

当Vue渲染一个组件的时候，会自动生成一些指令，如data-v-xxx。这些指令是Vue为了保证组件的封装性、作用域隔离、样式隔离等方面做出的设计。如果应用CSS属性的时候直接写在后代元素上，并且如果后代元素被渲染成为一个组件，这个样式将不会应用到这个后代元素上，导致样式失效。

Vue提供了一些API来获取这些额外生成的data-v-xxx操作，常见的方式有如下两种：

1、$attrs

$attrs是一个对象，包含了父组件中传入的非prop的属性。组件内部所用到的props除外。因为子组件不应该知道父组件的这些属性的具体含义。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent name="Alice" age="18" />
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    Name: {{ name }}<br>
    Age: {{ age }}
  </div>
</template>

<script>
export default {
  props: ['name'],
  mounted() {
    console.log(this.$attrs)
    // => { age: '18' }
  }
}
</script>

在上面的示例中，我们在ParentComponent.vue中传入了两个属性name和age给ChildComponent.vue，而ChildComponent.vue只定义了name这个prop。在子组件中，我们使用this.$attrs来获取父组件传过来的额外属性age。

2、$listeners

$listeners是一个对象，包含了父组件中传入的所有的事件监听器。这些监听器可以通过v-on="$listeners"传递给内部的子组件。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-on:increment="incrementCounter" />
</template>

<!-- ChildComponent.vue -->
<template>
  <button v-on="$listeners">Increment</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$listeners)
    // => { increment: ƒ }
  }
}
</script>

在上面的示例中，我们在ParentComponent.vue中定义了一个incrementCounter方法，并且用v-on:increment="incrementCounter"将这个方法传递给了ChildComponent.vue。在子组件中，我们使用v-on="$listeners"将父组件传过来的监听器绑定到button元素上，这个方法就会在按钮被点击的时候被调用。

总结来说，通过获取$attrs和$listeners，我们可以更加灵活的在子组件中使用父组件传递进来的数据和事件监听器，有效地保证了组件的封装性和作用域隔离。