本文共 1557 字，大约阅读时间需要 5 分钟。

$listeners与.native的使用

官网解释：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 个人理解： 创建parent组件的子组件child,child的子组件child_child 代码如下：

此时控制台打印结果：

在parent组件添加事件，代码如下：

上面代码中的parenttest1（）方法已经给出！！

执行结果为：

在parent组件再次添加事件，代码如下：

执行结果为：

然后向parant组件内的模板添加如下：

   
    child
   

结果为：

然后向child组件内的模板添加如下：

   
    child_child
   

结果为：

注意： 如果跳过“向parant组件内的模板添加”，直接“向child组件内的模板添”，child_child的listeners的值是{}，空！！所以必须是父传子，子传孙，不能父传孙！

另外一种写法

除了将v-on="$listeners"添加属性标签内，还有一种写法： 在父组件内创建计算属性，代码上面都有：

computed:{
                   childtest:function(){
                       var vm = this                     return Object.assign({
   },                    this.$listeners)                }            }

然后将v-on="$listeners"替换为v-on="childtest"

   
    child
   

结果是一样的！！

接下来向child_child组件添加点击事件：

添加@click="$emit('test1')"

var child_child = {
               template:`            
   
                
    
     -------------------
    
                
    
     child_child
    
            
   
            `,            mounted(){
                   console.log("child_child的$listeners值",this.$listeners);            }        }

然后点击child_child

结果显示：

当将代码修改为：

   
    child_child
   

结果为：

会直接执行test1（）的方法！

将parent标签修改为：

在修改为：

对比控制台打印的结果！

分析可得： 可见mouseover被.native激活了！！同时$listeners的值也只剩下test1！！ 也就是官方为啥说：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。 $listeners官网解释： 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 .native的官方解释为： 想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符

结束！

后续补充！

转载地址：http://qrezi.baihongyu.com/