Получение состояния вложенного компонента

Последнее обновление: 03.11.2020

С помощью ссылки this.$refs мы можем ссылаться на вложенные компоненты и, таким образом, обращаться к внутреннему состоянию компонента.

Например, изменим извне компонента одно из его свойств:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <userdetails :user="user" ref="details"></userdetails>
    <button v-on:click="toggle()">Скрыть/Показать</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = Vue.createApp({
    data(){
		return {
			user:{ name: 'Tom', age: 18 }
		}  
    },
    methods: {
        toggle(){
            this.$refs.details.visible = !this.$refs.details.visible;
        }
    }
});

app.component('userdetails', {
    props: ["user"],
    template: `<div>
                <h2>Информация о пользователе</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>

Здесь для компонента userdetails с помощью атрибута ref установлена ссылка details, через которую можно ссылаться на данный компонент.

<userdetails :user="user" ref="details"></userdetails>

В самом компоненте userdetails определено свойство visible, которое управляет видимостью частью шаблона компонента. Для изменения значения этого свойства в объекте Vue предусмотрена кнопка, по нажатию на которую срабатывает метод toggle():

toggle(){
	this.$refs.details.visible = !this.$refs.details.visible;
}
Изменение состояния компонентов помощью $refs в Vue 3

Стоит отметить, что ссылка $refs устанавливается только после рендеринга компонента. Поэтому не следует использовать $refs внутри шаблона компонента или в вычисляемых свойствах computed.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850