Создание компонентов в Vue.js 3
Компоненты являются основными строительными блоками веб-приложений на Vue.js 3. Они позволяют создавать масштабируемые и легко поддерживаемые приложения.
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
title: 'My Vue.js 3 Component',
};
},
};
</script>Использование props
Props – это пользовательские атрибуты, которые передаются от родительского компонента к дочернему. Они позволяют передавать данные между компонентами и делают их переиспользуемыми.
Родительский компонент:
<template>
<div>
<my-component :message="greeting"></my-component>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue';
export default {
components: {
MyComponent,
},
data() {
return {
greeting: 'Hello from parent!',
};
},
};
</script>Дочерний компонент:
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String,
},
};
</script>Слушатели событий и emit
События позволяют дочерним компонентам отправлять информацию родительскому компоненту. Используйте $emit для отправки события и v-on (или @) для прослушивания события.
Дочерний компонент:
<template>
<button @click="sendGreeting">Send Greeting</button>
</template>
<script>
export default {
methods: {
sendGreeting() {
this.$emit('greeting', 'Hello from child!');
},
},
};
</script>Родительский компонент:
<template>
<div>
<my-component @greeting="onGreeting"></my-component>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue';
export default {
components: {
MyComponent,
},
methods: {
onGreeting(greeting) {
console.log(greeting);
},
},
};
</script>Вычисляемые свойства и наблюдатели
Вычисляемые свойства (computed properties) и наблюдатели (watchers) предоставляют удобные способы реагирования на изменения данных.
Пример вычисляемого свойства:
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe',
};
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
},
},
};Пример наблюдателя:
export default {
data() {
return {
counter: 0,
};
},
watch: {
counter(newValue, oldValue) {
console.log(Counter changed from ${oldValue} to ${newValue});
},
},
};Слоты
Слоты позволяют родительским компонентам передавать контент в дочерние компоненты. Используйте тег `<slot>` для определения местоположения вставки контента. Дочерний компонент с использованием слота:
<template>
<div>
<slot></slot>
</div>
</template>
Родительский компонент:
<template>
<div>
<my-component>
<h2>Содержимое слота</h2>
</my-component>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue';
export default {
components: {
MyComponent,
},
};
</script>Заключение
Работа с компонентами и их свойствами в Vue.js 3 позволяет разработчикам создавать мощные и гибкие веб-приложения. Обмен данными между компонентами с помощью props, отправка событий с использованием $emit, вычисляемые свойства и наблюдатели, а также использование слотов для передачи контента обеспечивают гибкость и возможность масштабирования приложений на Vue.js 3.