This repository has been archived by the owner. It is now read-only.

Best way to pass data to a component #64

Closed
rafaelrinaldi opened this Issue Aug 26, 2014 · 7 comments

Comments

Projects
None yet
5 participants
@rafaelrinaldi

rafaelrinaldi commented Aug 26, 2014

What's the best/standard way to pass data to a component I'm registering? I was thinking about something like this:

// Creating a new component
var Component = Vue.extend({
  ready: function() {
    // Print value that was passed on registration
    console.log(this.foo); // bar
  }
});

// Pass a hash when registering a new component
Vue.component('my-component', Component, {foo: 'bar'});

This is useful when you want a dynamic startup value.

@yyx990803

This comment has been minimized.

Show comment
Hide comment
@yyx990803

yyx990803 Aug 27, 2014

Member

Don't pass in data at registration time, because data is per instance. If you hash contains objects they will be shared across all instances.

To instantiate default data per instance, just do so in the created hook. (think of it like a constructor where you attach data to this):

var Component = Vue.extend({
  created: function () {
    this.$data.foo = 'bar'
  }
})

If you are instantiating the component manually, you can also do:

new Component({
  data: {
    foo: 'bar'
  }
})

Finally, to pass in dynamic values in markup, use paramAttributes:

Vue.component('my-component', {
  paramAttributes: ['foo']
})
<my-component foo="bar"></my-component>
Member

yyx990803 commented Aug 27, 2014

Don't pass in data at registration time, because data is per instance. If you hash contains objects they will be shared across all instances.

To instantiate default data per instance, just do so in the created hook. (think of it like a constructor where you attach data to this):

var Component = Vue.extend({
  created: function () {
    this.$data.foo = 'bar'
  }
})

If you are instantiating the component manually, you can also do:

new Component({
  data: {
    foo: 'bar'
  }
})

Finally, to pass in dynamic values in markup, use paramAttributes:

Vue.component('my-component', {
  paramAttributes: ['foo']
})
<my-component foo="bar"></my-component>
@rafaelrinaldi

This comment has been minimized.

Show comment
Hide comment

rafaelrinaldi commented Aug 27, 2014

Thanks @yyx990803.

@bubnenkoff

This comment has been minimized.

Show comment
Hide comment
@bubnenkoff

bubnenkoff Feb 1, 2016

Am I right understand that data should include all data that component have. I mean all of them should be inside of data? Or I can create some outside?

And what is ready and created? Is it keywords?

bubnenkoff commented Feb 1, 2016

Am I right understand that data should include all data that component have. I mean all of them should be inside of data? Or I can create some outside?

And what is ready and created? Is it keywords?

@rafaelrinaldi

This comment has been minimized.

Show comment
Hide comment
@rafaelrinaldi

rafaelrinaldi Feb 1, 2016

@bubnenkoff You can simply use the component model layer.

rafaelrinaldi commented Feb 1, 2016

@bubnenkoff You can simply use the component model layer.

@axel22

This comment has been minimized.

Show comment
Hide comment
@axel22

axel22 Jul 15, 2016

What about props - is it possible to pass them when creating the component manually?

axel22 commented Jul 15, 2016

What about props - is it possible to pass them when creating the component manually?

@LinusBorg

This comment has been minimized.

Show comment
Hide comment
@LinusBorg

LinusBorg Jul 16, 2016

Member

@axel22

var instance = new MyComponent({ 
  propsData: { ...}
})
Member

LinusBorg commented Jul 16, 2016

@axel22

var instance = new MyComponent({ 
  propsData: { ...}
})
@axel22

This comment has been minimized.

Show comment
Hide comment
@axel22

axel22 Jul 16, 2016

@LinusBorg Thanks a lot! Interestingly, I found that if MyComponent has props defined, passing data somehow works for me, but propsData does not. Not sure why that is, but it seems that just using data solves my problem:

var instance = new MyComponent({ 
  data: { ... }
})

axel22 commented Jul 16, 2016

@LinusBorg Thanks a lot! Interestingly, I found that if MyComponent has props defined, passing data somehow works for me, but propsData does not. Not sure why that is, but it seems that just using data solves my problem:

var instance = new MyComponent({ 
  data: { ... }
})
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.