v-bind="$attrs" v-on="$listeners"
Vue 2.4 版本提供了这种方法，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁，业务清晰。
比如组件A=>B组件=>C组件等，这种多层级组件，A组件向C组件传递数据或者C组件的事件要触发A组件中的事件的话，就可以在B组件中写成
<template>
<div>
<span>{{child1}}<span>
<!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 --> <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） --> <c v-bind="$attrs" v-on="$listeners"></c> </div> </template> <script> import c from './c.vue'; export default { props: ['child1'], data () { return {}; }, inheritAttrs: false, components: { c }, mounted () { this.$emit('test1'); } }; </script>
C组件
<template>
<div>
<span>{{child2}}<span>
</div>
</template>
<script>
export default { props: [child2'], data () { return {}; }, inheritAttrs: false, mounted () { this.$emit('test2'); } }; </script>
A组件：
<template>
<div id="app"> <b :child1="child1" :child2="child2" @test1="test1" @test2="test2"></b> </div> </template> <script> import b from './b.vue'; export default { data () { return { child1:'hello child1', child2:'hello child2' }; }, components: { b }, methods: { test1 () { console.log('test1'); }, test2 () { console.log('test2'); } } }; </script>