6

No Vue.js temos como inserir dados em componentes por meio de props da seguinte forma.

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

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

Lendo a documentação mais a fundo me deparei com propsData que de acordo com a documentação:

Passa props a uma instância durante a sua criação. A intenção disso é primariamente tornar testes unitários mais fáceis.

Sou novo no Vue.js então não sou expert em testes de componentes, onde de acordo com o texto acima seria um exemplo de caso de uso dessa estratégia.

Alguém poderia me explicar de forma que eu entenda a diferença entre as duas e se possível um exemplo do uso de propsData?

1 Resposta 1

3

Ambos são a mesma coisa mas em fazes diferentes da vida do componente.

Quando defines o componente ele precisa de ter algumas das propriedades estruturais de um componente Vue, como props, data, methods, etc... ferramentas que a API do Vue disponibiliza. Neste caso as props são uma definição e aí podes definir se a prop é obrigatória (required: true) que tipo é e podes até ter uma função validatória ou um valor por defeito caso a prop não tenha valor próprio.

Quando chega a altura de usar esse componente, ou seja de criar uma instância, essas props que declaraste antes precisam de ter os valores que o componente vai consumir. Aí entram as propsData. Os valores nesse objeto vão ser passados à instância e ser usados como valores.

O teu exemplo com propsData seria assim:

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>

6
  • Onde eu defino o propsData no próprio componente ou no componente pai? 15/02/2019 às 17:27
  • Quais as fases que cada um é usado? 15/02/2019 às 17:28
  • @ThiagoLuizS o propsData é usado para criar o componente que tem props defenido. Podes criar um componente com uma função, não precisa de ser um componente pai. Não têm "fases", o propsData é o objeto que vai ser usado pelo novo componente nas suas props.
    – Sergio
    15/02/2019 às 18:02
  • Obrigado entendi agora. 15/02/2019 às 18:06
  • Minha última dúvida na documentação é dito que ele é usado primariamente em testes e somente durante a fase de criação da instância, é uma forma de injetar dados para realizar testes? E depois da criação props tem prioridade sobre propsData? 15/02/2019 às 18:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .