$listeners详解与使用。.native修饰的事件

$listeners

注意不要拼写错误！！！！ 

$attrs的内容详见 $attrs和inheritAttrs的详解与使用

---

官方解释：

 简言之，用v-on绑定的且不用.native修饰的事件。可通过$listeners传递。

例子：

one组件

<template>
  <div>
    one组件
    <!-- <two :name='name' :age='age' @eventOne='eventHandler' @click.native='clickHandler' /> -->
    <two v-bind="{name,age}"  v-on="{eventHandler,clickFun}" @click.native='clickHandler' />
  </div>
</template>
<script>
import two from './two'
export default {
  components: {
    two
  },
  methods: {
    eventHandler (data) {
      console.log(data + '触发了one中的eventHandler')
    },
    clickHandler () {
      console.log('触发了one中的clickHandler')
    },
    clickFun () {
      console.log('这是one的click事件啊')
    }
  },
 
  data () {
    return {
      name: 'jdd',
      age: '20'
    }
  }
}
</script>

two组件：

<template>
  <div>
    这是two组件
    <three v-bind='$attrs' v-on="$listeners" />
  </div>
</template>
<script>
import three from './three'
export default {
  inheritAttrs: true,
  props: ['age'],
  components: {
    three
  },
  mounted () {
    //父组件共传来连个值，一个name， 一个age，由于age被props接收了，故$attrs 只有name属性
    // console.log(this.$attrs) //{name: 'jdd'}
    //父组件监听了三个事件，一个eventHandler， 一个clickFun，由于clickHandler被native修饰了，故$listeners 只有eventOne clickFun事件
    console.log(this.$listeners)
    this.$listeners.eventHandler('two')

    this.$emit('eventHandler', 'two') //可以触发Parent组件中的eventHandler函数
  }
}
</script>

 

three组件：

<template>
  <div>
    这是第三层组件
    <four v-bind='$attrs' v-on="$listeners" />
  </div>
</template>
<script>
import four from './four'
export default {
  components: {
    four
  },
  mounted () {
    //这样one组件就把数据传到了three组件
    //console.log(this.$attrs) // {name: 'jdd'}
    console.log(this.$listeners)
    this.$listeners.eventHandler('three') // 等同与下一行
    //this.$emit('eventHandler', 'three')  //可以触发one组件中的eventHandler函数
  }
}
</script>

 

four组件

<template>
  <div>
    这是第四层组件------第一层组件的消息{{$attrs}}
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  created () {
    console.log(this.$listeners)
    this.$listeners.eventHandler('four')
    //this.$emit('eventHandler','four') //可以触发Parent组件中的eventHandler函数
  }
}
</script>

 如下图：

.native修饰的事件

官方解释：

如果我想引用一个组件并且添加点击事件，事件需要用.native修饰 ，不然不起作用

    <!-- 这个点击事件无用 -->

    <one @click="oneClick"></one> 

     <!-- 这个点击事件有用 -->

    <one @click.native="oneClick"></one>

$attrs的内容详见 $attrs和inheritAttrs的详解与使用

如有不对的地方欢迎指正。