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

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

Параметр data

Компоненты могут содержать некоторые данные или состояние в виде параметра data - в принципе как и объекты приложения Vue. Например:

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

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

<div id="app">
    <counter></counter>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const comp = {
    template:'<div><h2>{{header}}</h2></div>',
    data(){
        return {
            header: 'Counter Program'
        }
    }
};
const app = Vue.createApp({
	components:{
        'counter':comp
}});
app.mount('#app');
</script>

Может возникнуть вопрос, а что если и объект приложения, и компонент этого приложения одновременно определяют свойство с одинаковым называнием. В этом случае компонент будет использовать свое собственное свойство. Например:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<h2>{{ header }}</h2>
    <counter></counter>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const comp = {
    template:'<div><h3>{{header}}</h3></div>',
    data(){
        return {
            header: 'Component Header'
        }
    }
};
const app = Vue.createApp({
	data(){
        return {
            header: 'App Header'
        }
    },
	components:{
        'counter':comp
}});
app.mount('#app');
</script>
</body>
</html>
Данные компонентов и приложения в Vue 3

Параметр methods

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

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <counter></counter>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = Vue.createApp({});
app.component('counter', {
    data(){
        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++;
        }
    }
});
app.mount('#app');
</script>
</body>
</html>

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

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

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

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