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>

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 propsname 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.