Propriedades em Vue.js

Cada componente pode definir um parâmetro props, permitindo passar dados externos para o componente. No exemplo a seguir, o componente recebe um valor por meio de props:

<!DOCTYPE html>
<html>
  <head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <message-comp message="hello"></message-comp>
    </div>

    <script>
      const app = Vue.createApp({});

      app.component("message-comp", {
        props: ["message"],
        template: "<h2>{{ message }}</h2>",
      });

      app.mount("#app");
    </script>
  </body>
</html>

O parâmetro props define um conjunto de propriedades que podem receber valores externos. Neste caso, há apenas a propriedade message, que pode ser usada no template do componente (<h2>{{ message }}</h2>).

Para passar um valor para essa propriedade, é necessário definir um atributo no elemento do componente com o mesmo nome da propriedade:

<message-comp message="hello"></message-comp>

Passando parâmetros com props em Vue.js

Diferença entre props e data

As props são semelhantes às propriedades definidas no objeto data(). É possível definir uma propriedade com o mesmo nome tanto em props quanto em data:

app.component("message-comp", {
  props: ["message"],
  data() {
    return { message: "hi all" };
  },
  template: "<h2>{{ message }}</h2>",
});

Nesse caso, o Vue.js prioriza a propriedade message definida dentro de data() em vez da props. Além disso, o Vue exibe um aviso no console indicando que uma propriedade com o mesmo nome foi definida em ambos os lugares. Para evitar conflitos, essa redundância deve ser evitada.

Propriedades dinâmicas

No primeiro exemplo, o valor de message era um valor fixo, "hello". No entanto, é possível definir valores dinamicamente, dependendo dos dados inseridos pelo usuário:

<!DOCTYPE html>
<html>
  <head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="welcome" /><br /><br />
      <message-comp v-bind:message="welcome"></message-comp>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return { welcome: "" };
        },
      });

      app.component("message-comp", {
        props: ["message"],
        template: "<h2>{{ message }}</h2>",
      });

      app.mount("#app");
    </script>
  </body>
</html>

Agora, o valor da propriedade message é atualizado dinamicamente de acordo com o texto inserido no campo de entrada.

Para isso, a diretiva v-bind é utilizada antes do nome da propriedade, estabelecendo a vinculação com um valor dinâmico:

<message-comp v-bind:message="welcome"></message-comp>

Existe também uma forma abreviada dessa sintaxe:

<message-comp :message="welcome"></message-comp>

Passando parâmetros dinâmicos com props em Vue.js

Passando Dados Complexos

Se um componente precisar exibir um conjunto de dados como, por exemplo, informações de usuário (nome e idade), esses dados podem ser passados individualmente:

<!DOCTYPE html>
<html>
  <head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="name" /><br /><br />
      <input type="number" v-model.number="age" /><br /><br />
      <user :name="name" :age="age"></user>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return { name: "", age: 18 };
        },
      });

      app.component("user", {
        props: ["name", "age"],
        template: "<div><h2>User</h2><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>",
      });

      app.mount("#app");
    </script>
  </body>
</html>

O componente user recebe name e age como props separadas. No entanto, é possível passar um objeto inteiro como propriedade:

<div id="app">
  <input type="text" v-model="user.name" /><br /><br />
  <input type="number" v-model.number="user.age" /><br /><br />
  <user v-bind="user"></user>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
  const app = Vue.createApp(}
      data() }
          return }
              user: } name: '', age: 18 {
          {;
      {
  {);

  app.component('user', }
      props: ['name', 'age'],
      template: '<div><h2>User</h2><p>Name: }} name {{</p><p>Age: }} age {{</p></div>'
  {);

  app.mount('#app');
</script>

Com v-bind="user", o objeto user é passado diretamente para o componente e seus valores são automaticamente associados às props name e age. Para que isso funcione corretamente, os nomes das propriedades no objeto user devem corresponder exatamente aos nomes definidos no componente. O resultado será o mesmo do exemplo anterior, mas a estrutura do código fica mais organizada.

Embora pareça que o componente recebe um único objeto user, na prática ele continua recebendo os valores das propriedades name e age individualmente.

Documentação oficial:

Propriedades