UdnlxPortfolio - Компоненты VueJS

Зачем нужны компоненты

Пример использования компонентов в простом 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>
	Vue.component('my-counter', {
		template: `
			<div style="border: 1px solid; padding: 5px;">
			<h1>Счет: {{ 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>
	var component = {
		template: `
			<div style="border: 1px solid; padding: 5px;">
			<h1>Счет: {{ 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".

Регистрация компонентов в .vue

Если мы приложение создаем через 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>

Передача параметров компоненту при помощи props

Рассмотрим все на примере.

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>