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

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

谢谢,