Состояние и поведение компонентов

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

Параметр data

Как и объекты Vue, компоненты могут содержать некоторые данные или состояние в виде параметра data. Но при этом в компонентах параметр data должен представлять функцию, которая в свою очередь и возвращает состояние компонента. Например:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<counter></counter>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('counter', {
	data: function(){
		return {
			header: 'Counter Program'
		}
	},
	template:'<div><h2>{{header}}</h2></div>'
});
new Vue({
	el: "#app"
});
</script>
</body>
</html>
Данные компонентов Vue.js

Подобным образом можно определять данные в локально регистрируемых компонентах:

var comp = {
	template:'<div><h2>{{header}}</h2></div>',
	data: function(){
		return {
			header: 'Counter Program'
		}
	}
};
new Vue({
	el: "#app",
	components:{
		'counter':comp
	}
});

Параметр methods

Кроме состояния компоненты могут определять поведение в виде методов, которые определяются через параметр methods, как и в объектах Vue:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<counter></counter>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('counter', {
	data: function(){
		return {
			header: 'Counter Program',
			count:0
		}
	},
	template:`<div><h2>{{header}}</h2>
				<button v-on:click="increase">+</button>
				<span>{{count}}</span>
			</div>`,
	methods:{
		increase:function(){
			this.count++;
		}
	}
});
new Vue({
	el: "#app"
});
</script>
</body>
</html>

Здесь по нажатию на кнопку вызывается метод increase, который увеличивает значение свойства count.

Методы в компонентах во Vue.js

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

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