Acessando o Estado de um Componente Filho no Vue.js
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.
⚠️ É importante ressaltar que a propriedade
$refssó 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.
Documentação oficial: