如何为Vue Material的datepicker组件绑定onfocus聚焦事件？

模板直接绑定实现方式 #

你需要用Vue提供的.native事件修饰符，直接在md-datepicker组件上绑定原生focus事件即可，无需在mounted生命周期中手动操作DOM绑定事件，修改后的代码如下：

<div class="md-layout-item md-small-size-100 md-size-22">
    <md-datepicker 
        v-model="birthDate" 
        :md-open-on-focus="false" 
        ref="birthDateEl"
        @focus.native="onBirthDateFocus('some param')"
    >
        <label>Birth date</label>
    </md-datepicker>
</div>

onBirthDateFocus方法正常定义在组件的methods配置项中即可正常触发。 #

原实现的缺陷说明 #

你之前的写法存在两个明显问题：

• 直接给DOM元素的onfocus属性赋值，会覆盖该元素上已绑定的其他focus事件监听，容易引发未知的功能异常
• 强依赖Vue Material组件内部的refs层级结构，如果后续组件版本升级调整了内部$refs的命名或结构，你的代码会直接失效，维护性极低

.native修饰符的方案完全规避了上述问题，也满足了你想直接在模板中绑定事件的需求。

内容的提问来源于stack exchange，提问作者Beetlejuice