代码之家 › 专栏 › 技术社区 › ChrisNY

向Vue组件元素动态添加任意属性?

components vuejs2 attributes vue.js

0

ChrisNY · 技术社区 · 8 年前

我想创建一个组件,它可以具有组件不期望/不知道的任意属性(例如数据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' />

谢谢,

1 回复 | 直到 8 年前

1

0

Vamsi Krishna 8 年前

只要设定 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>