Difference between props and propsData

Question

In the Vue.js we have how to insert data into components through props as follows.

const hello = {
  template: '<div>{{ message }}',
  props: ['message']
};

new Vue({
  el: '#app',
  data: {
    message: 'Pt Stackoverflow',
  },
  components: {
    hello,
  }
});

Reading the documentation further I came across propsData that according to the documentation:

Passes props to an instance during its creation. The intention of this is primarily make unit testing easier.

I’m new to the Vue.js so I’m not an expert in component testing, where according to the text above would be an example of using this strategy case.

Could someone explain me in a way that I understand the difference between the two and if possible an example of the use of propsData?

Answer 1

Both are the same thing but you make life different from the component.

When defining the component it needs to have some of the structural properties of a Vue component, such as props, data, methods, etc... tools that the Vue API provides. In this case the props are a definition and then you can define whether the prop is mandatory (required: true) what type is and can even have a validation function or a default value if the prop has no own value.

When it comes time to use this component, that is to create an instance, those props you declared before need to have the values that the component will consume. Here come the propsData. The values in this object will be passed to the instance and used as values.

Your example with propsData would be like this:

const hello = {
  template: '<div>{{ message }}</div>',
  props: ['message']
};

// montando um componente dentro do template de outro (o caso mais habitual)
new Vue({
  el: '#app',
  data: {
    message: 'Pt Stackoverflow',
  },
  components: {
    hello,
  }
});

// criando o elemento fora do template
new Vue({
  ...hello,
  propsData: {
    message: 'Pt Stackoverflow',
  }
}).$mount(document.getElementById('hello2'));

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>


<div id="app">
  <hello message="Olá"></hello>
</div>

<span id="hello2"></span>