Question

我想在运行时从Vue.data创建一个组件，它可以具有任意属性（例如，data-xxx）组件不会预期/知道。例如，这不起作用，但在概念上：

Vue.component('text-input',{
  template: `<input type="text" v-model="value" :name="name" {{extra_atts}}>`,
  props:['value','name','extra_atts']
});

.....
//Used elsewhere in Vue app:

<text-input :value="avalue" :name="aname" :extra_atts="dynamic_atts"> </text-input>

const vm = new Vue({
  data: {
    aname: "username",
    avalue: "johnny",
    dynamic_atts: "placeholder='Your name' title='Required' data-extrainfo='arbitrary data'",
  }...

所以它将呈现为：

<input type='text' value='johnny' name='username' placeholder='Your name' title='Required' data-extrainfo='arbitrary data' />

有没有办法在Vue中执行此操作？

谢谢，

克里斯

Answer 1

只需将inheritAttrs设置为false即可。然后使用$attrs绑定输入元素

上的属性

Vue.component('text-input',{
  inheritAttrs: false,
  template: `<input type="text" v-model="value" :name="name" v-bind="$attrs">`,
  props:['value','name']
});

现在只需添加组件上的属性，就像添加常规输入一样

<text-input :value="avalue" :name="aname" placeholder='Your name' title='Required' data-extrainfo='arbitrary data'> </text-input>

动态地将任意属性添加到Vue组件元素？

1 个答案: