在 Vue.js 中组合输入组件的方法答案

【问题标题】：Ways to compose input components in Vue.js在 Vue.js 中组合输入组件的方法
【发布时间】：2018-02-06 21:30:26
【问题描述】：

我想要一个基本输入组件，然后是一个扩展它的数字输入组件，以及一个扩展它的货币输入组件。

通过扩展，我希望让“子”组件（在继承方面）在其模板中使用父组件，因为这似乎是“Vue 方式”。

但我希望能够自动支持事件等，而无需手动添加 @click、@blur、@keyup 等（或稍后添加的任何其他事件）的句柄

理想情况下，我希望能够写作：

<currency-input @click="clickMe"></currency-input>

并让currency-input 获取其中的输入事件。

// baseInput.js

<template>
  <input v-on:click="">
</template>

我还在许多输入中使用掩码输入来帮助实现一致的掩码。我有一个 mixin，但这似乎不允许我更改标记以添加道具渲染。我想知道这样做的推荐方法是什么，以便我可以轻松地制作始终具有默认输入功能的不同类型的输入组件。

【问题讨论】：

【解决方案1】：

click.native 将在组件上侦听本机事件以从组件中包含的元素冒泡。在你的情况下，它会是

<currency-input @click.native="clickMe"></currency-input>

【讨论】：