Vue.js Acessando o Estado de um Componente Filho

No Vue.js, a propriedade $refs permite acessar diretamente componentes filhos e interagir com seu estado interno. Isso possibilita modificar propriedades e chamar métodos dentro do componente referenciado.

No exemplo abaixo, um componente pai altera uma propriedade do componente filho:

<!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">
        <user-details :user="user" ref="details"></user-details>
        <button v-on:click="toggle()">Ocultar/Mostrar</button>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    user: { name: 'Tom', age: 18 }
                };
            },
            methods: {
                toggle() {
                    this.$refs.details.visible = !this.$refs.details.visible;
                }
            }
        });

        app.component('user-details', {
            props: ["user"],
            template: `<div>
                        <h2>Informações do Usuário</h2>
                        <div v-if="visible">
                            <p>Name: {{ user.name }}</p>
                            <p>Age: {{ user.age }}</p>
                        </div>
                    </div>`,
            data() {
                return {
                    visible: false
                };
            }
        });

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

O componente user-details recebe uma referência (ref="details") para que possa ser acessado diretamente pelo componente pai. O botão aciona o método toggle(), que altera o estado da propriedade visible dentro do componente filho por meio de $refs.

No componente user-details, a propriedade visible controla a exibição das informações do usuário. Quando o botão é clicado, toggle() inverte o valor dessa propriedade, ocultando ou exibindo os detalhes.

Alterando o Estado de um Componente Usando Refs em Vue.js

É importante ressaltar que a propriedade $refs só fica disponível após a renderização do componente. Por isso, não deve ser utilizada dentro do template ou em propriedades computadas (computed), pois pode não estar definida no momento da execução.