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

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

С помощью ссылки this.$refs из объекта Vue мы можем ссылаться на различные элементы веб-станицы внутри объекта шаблона Vue. Но кроме того, подобным образом мы можем ссылаться также и на вложенные компоненты и, таким образом, обращаться к внутреннему состоянию компонента.

Например, установим в объекте Vue изменение свойства, которое определено в компоненте:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <userdetails :user="user" ref="details"></userdetails>
	<button v-on:click="toggle()">Show</button>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.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: function(){
		return{
			visible: false
		}
	}
});
new Vue({
    el: "#app",
    data: {
        user:{
			name: 'Tom',
			age: 18
        }
    },
	methods: {
		toggle: function(){
			this.$refs.details.visible = !this.$refs.details.visible;
		}
	}
});
</script>
</body>
</html>

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

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

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

toggle: function(){
	this.$refs.details.visible = !this.$refs.details.visible;
}
Состояние компонентов в Vue.js

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

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