如何在vue.js中向动态组件添加道具？

Question

I create component dynamically:

 <component is="tab"/> 

How to add props for this component? I try:

 <component is="tab" my-props="test" /> 

And I got error in console:

[Vue warn]: Attribute "type" is ignored on component <component> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

PS I'm using 1.0.26 version vue.js.

Answer 1

If test not just "test" text, but some value in your data. Then you need to pass it like so:

<component is="tab" :props="test" />

And don't forget to add your properties in props array inside component. props: ['props'] .

http://jsbin.com/zekiyeroka/edit?html,css,js,console,output

Here is working example. Adding to the data is optional, but i prefer this way. Because you can operate your data in the much easier way in the future.

PS you need to declare your data in the component like a function , not just object