vue .native $listeners 和 $attrs总结

.native 用于自定义子组件上面绑定事件，简而言之，就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的。

$listeners :当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。

===============================================父组件=================================
<template>
  <div class="test-a">
      <btn @click="getClick()"/> 
    //自定义组件 在上面用click事件，是因为用了子组件用$listners监听父组件事件，把事件绑定到了子 
    //组件相关的的控件上面
  </div>
</template>
<script>

export default {
  data () {
    return {}
  },
  components: {
    btn: () => import('./btn')
  },
  methods: {
    getClick () {
      console.log('111')
    },
  },

}
</script>


=========================================================子组件=============================
<template>
  <div class="test-b">
    <div>
      <button  v-on="$listeners">我他妈是个按钮。点击我啊</button>
       //v-on="$listeners" 包含了绑定在父组件<btn />所有的事件 ，如果没有v-on="$listeners"， 
       //父组件想要触发点击，可以用<btn  @click.native ="getclick"/>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {}
  },
  mounted: function () {
    console.log('$listeners:')
    console.log(this.$listeners) // 父级添加的所有事件都在这里
  },

}
</script>

 

$listeners :当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。（根元素不具备focus事件）

注意：使用.native修饰符的事件，不会体现在$listeners属性上。

更好的诠释这句话，请看下面的案例：

====================================父组件=========================================

<template>
  <div class="test-a">
        <base-input
            v-model="username"
            label="基础输入组件"
            @click.native="handleBaseInputClick"
            @focus="handleBaseInputFocus"
            placeholder="请输入您的名字"
            class="username-input"/>
  </div>
</template>
<script>

export default {
  name: 'Test',
  data () {
    return {
      username: ''
    }
  },
  components: {
    baseInput: () => import('./bb'),
  },
  beforeUpdate: function () {
    console.log(this.username)
  },
  methods: {
    handleBaseInputFocus: function (ev) {
      console.log('ev')
    },
    handleBaseInputClick: function (ev) {
      console.log(ev.type, 'ev.type')
    }
  },
}
</script>
=========================================子组件=====================================
<template>
  <div class="test-b">
  <label id="base-label">
      {{$attrs.label}}
      <input v-bind:value="$attrs.value" v-bind="$attrs" v-on="$listeners"/>
  </label>

  </div>
</template>
<script>

export default {
  name: 'bb',
  data () {
    return {

    }
  },
  // props: ['label', 'value'],
  methods: {

  },
  mounted: function () {
    console.log('$attrs:')
    console.log(this.$attrs)
    console.log('$listeners:')
    console.log(this.$listeners) // 父级添加的所有属性都在这里
  },

}
</script>
<style scoped lang='less'>
.test-b{
  width: 100vw;
  height: 100vh;

}
</style>

参考：https://blog.csdn.net/weixin_42312074/article/details/108994162

拓展更深层数组件 用$attrs 和 $listeners https://blog.csdn.net/songxiugongwang/article/details/84001967