Vue.js的注意事项与技巧(3)

实际上这是完全没必要的。简单的解决方案是使用 Vue 实例上的属性 vm.$listeners 将事件重新绑定到所需DOM 元素上：

<!-- Notice the use of $listeners --> 
<template> 
    <div class="wrapper-comp"> 
        <label>My Label</label> 
        <input v-on="$listeners" type="text"/> 
    </div> 
</template> 
<!-- Uses: @focus event will bind to internal input element --> 
<custom-input @focus="onFocus"></custom-input> 

6、为什么你不能在 slot 上绑定和触发事件

我经常看到有些开发人员，，在 slot 上进行事件的监听和分发，这是不可能的。

组件的 slot 由调用它的父组件提供，这意味着所有事件都应该与父组件相关联。尝试去倾听这些变化意味着你的父子组件是紧密耦合的，不过有另一种方法可以做到这一点，Evan You解释得很好:

Is it possible to emit event from component inside slot #4332

Suggestion: v-on on slots

7、slot 中的 slot(访问孙辈slot)

在某些时候，可能会遇到这种情况。假设有一个组件，比如 A ，它接受一些 slot 。遵循组合的原则，使用组件 A 构建另一个组件 B 。然后你把 B 用在 C 中。

那么现在问题来了： 如何将 slot 从 C 组件传递到 A 组件?

要回答这个问题，首先取决你使用何种方式构建组件? 如果你是用 render 函数，那就很简单。你只需要在组件 B 的 render 函数中进行如下操作：

// Render function for component B 
function render(h) { 
    return h('component-a', { 
        // Passing slots as they are to component A 
        scopedSlot: this.$scopedSlots 
    } 
}  

但是，如果你使用的是基于模板的方式，那么就有些糟糕了。幸运的是，在这个问题上有了进展：

feat(core): support passing down scopedSlots with v-bind

希望这篇文章让你对 Vue.js 的设计思路有了更深入的了解，并为你提供了一些在高级场景中的技巧。

（编辑：ASP站长网）