Пример использования компонентов в простом HTML. Компоненты используются в том случае, когда в приложении этот элемент будет использоваться несколько раз, и что бы не повторять в этом случае код HTML.
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изучение VueJS</title>
<meta name="Description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>
<div class="container-001">
<div class="container-001-content">
<div id="app">
<my-counter></my-counter>
<my-counter></my-counter>
<my-counter></my-counter>
<hr>
<my-counter v-for="c in 5"></my-counter>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="assets/js/main.js"></script>
<script>{{ counter }}</h1>
<button @click="add">Прибавить</button>
</div>
`,
data: function() {
return {
counter: 0
}
},
methods: {
add: function() {
this.counter++
}
}
})
new Vue({
el: '#app',
})
</script>
</body>
</html>
В примере выше мы делали компонент глобально, т.е. он будет доступен в любом приложении Vue на странице. Но если нам нужно что бы компонент был доступен не в любом приложении, то регистрируем компонент локально.
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изучение VueJS</title>
<meta name="Description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>
<div class="container-001">
<div class="container-001-content">
<div id="app">
<my-counter></my-counter>
<my-counter></my-counter>
<my-counter></my-counter>
</div>
<div id="app2">
<my-counter></my-counter>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="assets/js/main.js"></script>
<script>{{ counter }}</h1>
<button @click="add">Прибавить</button>
</div>
`,
data: function() {
return {
counter: 0
}
},
methods: {
add: function() {
this.counter++
}
}
}
new Vue({
el: '#app',
components: {
myCounter: component
}
});
new Vue({
el: '#app2'
})
</script>
</body>
</html>
Обращаю внимание на то что в VueJS в разделе "components" имена тегов компонентов следует писать по правилам CamelCase , т.е. для тега "my-counter" мы напишем в "myCounter".
Если мы приложение создаем через VueCLI, то компоненты в нем создаются и регистрируются через файлы .vue и желательно эти файлы располагать в папке "components" внутри папки "src". Создадим для примера Post.vue.
Файл компонента должен содержать в себе следующие теги - template, script и style:
Post.vue
<template>
<div>
<h3>{{ namePost }}</h3>
<p>{{ textPost }}</p>
</div>
</template>
<script>
export default {
data() {
return {
namePost: 'Наименование поста',
textPost: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus asperiores, labore iusto, iste ut error nihil quidem ipsam quos impedit sunt omnis reprehenderit ducimus natus unde odio! Sed, enim quis.'
}
}
}
</script>
<style scoped></style>
В main.js регистрируем наш компонент, добавляем строки "import Post from './components/Post';" и "Vue.component('app-post', Post);".
main.js
import Vue from 'vue';
import App from './App.vue';
import Post from './components/Post';
Vue.component('app-post', Post);
new Vue({
el: '#app',
render: h => h(App)
})
В App.vue добавляем строку "<app-post></app-post>" для вывода нашего компонента.
App.vue
<template>
<div>
<h1> {{msg}} </h1>
<app-post></app-post>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style></style>
Это глобальное подключение компонента, если же нужно локальное, то для примера App.vue будет выглядеть так:
App.vue
<template>
<div>
<h1> {{msg}} </h1>
<app-post></app-post>
</div>
</template>
<script>
import Post from './components/Post.vue';
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: {
appPost: Post
}
}
</script>
<style></style>
Рассмотрим все на примере.
main.js
import Vue from 'vue';
import App from './App.vue';
import Cars from './components/Cars';
Vue.component('app-car', Cars);
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div>
<h1> {{carName}} </h1>
<app-car
v-bind:carName="carName"
v-bind:carYear="carYear"
></app-car>
</div>
</template>
<script>
export default {
data () {
return {
carName: 'Mazda',
carYear: 2015
}
}
}
</script>
<style></style>
Cars.vue
<template>
<div class="carblock">
<h3>{{ carName }}</h3>
<p>{{ carYear }}</p>
</div>
</template>
<script>
export default {
props: ['carName', 'carYear'],
}
</script>
<style scoped>
.carblock {
padding: 10px;
border: 3px solid #000000;}
</style>
Для валидации параметров мы можем использовать такой вид записи props.
props с валидацией
<script>
export default {
//props: ['carName', 'carYear'],
props: {
carName: String,
carYear: Number
}
props: {
carName: {
type: String,
required: true
},
carYear: {
type: Number,
required: true
}
}
}
</script>