Home » vue » Can Vue component have both data and props?

Can Vue component have both data and props?

Posted by: admin November 26, 2021 Leave a comment

Questions:

Standard example of component in Vue looks like that:

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

In basic docs about components there’s no data object used, just props. However documentation of data mentions components:

Restriction: Only accepts Function when used in a component
definition.

There’s even example:

var data = { a: 1 }

// direct instance creation
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// must use function when in Vue.extend()
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

Does it mean that component can have both data and props? Is data kind of private property (if we’d like to compare to OOP) and property public one?

Answers:

Components can have both props and data. The difference between them is that props are received by the parent component while data are manipulated by the component. The props are static (changeable by the parent) while data are dynamic (but cannot be changed by the parent).

The only way a child component can affect a property is by emitting events. The parent component can listen to those events and receive and receive anything in the payload argument. In the listener function, they can change their own data and the child property will be updated as well. This is known as the one-way data flow:

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

Vue documentation

Here’s a little schema if you’re visual:

enter image description here