Question

我们正在公司内部创建内部Web开发框架。我们正在Vue之上创建组件库。稍后将支持其他一些Web开发框架，如React。等等我们通过在我们自己的Vue组件中封装简单的表单控件来实现这一点，并在模板中使用它们：

char

我们想要做的是，重命名＆＃34; v-model＆＃34; prop name to other else，进一步抽象出对Vue的任何引用，以便我们可以轻松切换到另一个框架。

关于如何进行其他搜索和替换的任何想法？

Answer 1

在Vuejs 2.2中，您现在可以将value重命名为其他属性(source)

内部组件：

Vue.component('OurInput', {
  model: {
    prop: 'customer',
    event: 'change'
  },
  props: {
    // use `customer` as the prop to take the place of `value`
    customer: {
      type: Object,
      default: () {
        return {};
      }
    }
  },
  // ...
})

使用v模型进行双向绑定：

<our-input v-model="customerModel" />

不使用v-model的双向绑定：

<our-input :customer="customerModel" @change="val => { customer = val }"/>

不要忘记在组件内部发出更改事件，或者只是使用字段输入事件：

this.$emit('close');

Answer 2

我想不能这样做，因为v-model是由vue提供的指令构建的。

但是v-model只是绑定输入value并在输入上添加事件监听器来监听任何更新并更新输入的value。

这样：

<our-input v-model="customerModel" />

与：

相同

<our-input :value="customerModel"  @input="value => { customerModel = value }">/>

也许这可以帮到你。有关详细信息，请参阅custom component input handling

在Vue组件中更改v-model属性名称

2 个答案: