Vue v2.4中新增的$attrs及$listeners属性使用教程

Vue v2.4版本中引入了$attrs和$listeners属性，这两个属性可以在组件中更方便地处理父组件传递的属性和事件监听。下面是详细的使用教程。

$attrs属性

$attrs属性是一个对象，包含了父组件传递给子组件的非props属性。在子组件中，可以通过$attrs属性访问这些属性。

示例1

假设有一个父组件ParentComponent，它传递了一个非props属性title给子组件ChildComponent：

<template>
  <div>
    <child-component title=\"Hello World\"></child-component>
  </div>
</template>

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

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

在子组件ChildComponent中，可以通过$attrs属性获取父组件传递的非props属性：

<template>
  <div>
    <h1>{{ $attrs.title }}</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$attrs.title); // 输出：Hello World
  }
}
</script>

示例2

$attrs属性还可以与v-bind指令一起使用，将父组件传递的非props属性绑定到子组件的元素上。

<template>
  <div>
    <child-component v-bind=\"$attrs\"></child-component>
  </div>
</template>

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

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

在子组件ChildComponent中，可以直接使用父组件传递的非props属性：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

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

$listeners属性

$listeners属性是一个对象，包含了父组件传递给子组件的所有事件监听器。在子组件中，可以通过$listeners属性监听这些事件。

示例1

假设有一个父组件ParentComponent，它传递了一个事件监听器click给子组件ChildComponent：

<template>
  <div>
    <child-component v-on:click=\"handleClick\"></child-component>
  </div>
</template>

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

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

在子组件ChildComponent中，可以通过$listeners属性监听父组件传递的事件：

<template>
  <div>
    <button v-on=\"$listeners\">Click me</button>
  </div>
</template>

子组件中的button元素会继承父组件传递的事件监听器，当点击按钮时，会触发父组件中定义的handleClick方法。

示例2

$listeners属性还可以与v-on指令一起使用，将父组件传递的事件监听器绑定到子组件的元素上。

<template>
  <div>
    <child-component v-on=\"$listeners\"></child-component>
  </div>
</template>

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

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

在子组件ChildComponent中，可以直接使用父组件传递的事件监听器：

<template>
  <div>
    <button v-on:click=\"$listeners.click\">Click me</button>
  </div>
</template>

子组件中的button元素会触发父组件传递的click事件监听器。

这就是$attrs和$listeners属性的使用教程。通过使用这两个属性，可以更方便地处理父组件传递的属性和事件监听。