Vue.js的注意事项与技巧

现实上这是完全没须要的。简朴的办理方案是行使 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 的计划思绪有了更深入的相识，并为你提供了一些在高级场景中的能力。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!