Прочитав этот пост, вы сможете приступить к включению компонентов vuejs для взаимодействия друг с другом.
Это легко реализовать, как только вы освоитесь. Связь компонентов необходима, когда вам нужно, чтобы компонент уведомил другой компонент или компоненты о только что имевшем место действии. Мы собираемся создать компонент для проверки правильности вывода. Компонент примет данные и проверит, верны ли они, и переведет нашего пользователя на следующий этап или предупредит об ошибке. Это взаимодействие между корневым экземпляром и компонентом называется родительско-дочерним взаимодействием.
Давайте начнем; страницу html. Получите код на github:
<!DOCTYPE html>
<html>
<head>
<title>Component communication</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.27/css/uikit.min.css" />
</head>
<body>
<div class="uk-section">
<div id="root" class="uk-container">
<pin @incorrect-pin="alertUser"></pin>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>
</body>
</html>
Это обычный шаблон с штыревым компонентом. Ниже представлен наш файл app.js, содержащий код vuejs. У нас есть компонент булавки и корневой экземпляр.
Vue.component('pin', {
template: '<input v-model="pin">',
data: {
return {
pin: ""
}
},
methods: {
}
})
new Vue ({
el: '#root',
methods: {
}
})
Итак, у нас есть компонент вывода с входом с выводом v-модели, а также корневой экземпляр. Простой.
Теперь мы хотим уведомить наш корневой экземпляр, чтобы он мог отображать предупреждение об ошибке, если используется недопустимый пин-код. Как? Заполнив ввод и оставив его, мы вызываем метод checkValidity, который берет пин-код для проверки действительности. Итак, наш контактный компонент становится:
Vue.component('pin', {
template: '<input v-model="pin" @blur="checkValidity">',
data: {
return {
pin: ""
}
},
methods: {
checkValidity () {
if(this.pin !=== "12345670") {
this.$emit('incorrect-pin');
}
//make ajax request
//navigate to next page
//you can do whatever...
}
}
})
При размытии вызывается метод checkValidity, который проверяет достоверность предоставленного вывода и генерирует событие с именем alertUser. Этот alertUser будет методом в корневом экземпляре (родительском), чтобы уведомить пользователя о том, что предоставленный PIN-код неверен.
new Vue ({
el: '#root',
methods: {
alertUser () {
alert('You typed a wrong pin');
}
}
})
Обновите index.html, указав неверный контакт на компоненте вывода.
<!DOCTYPE html>
<html>
<head>
<title>Component communication</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.27/css/uikit.min.css" />
</head>
<body>
<div class="uk-section">
<div id="root" class="uk-container">
<pin @incorrect-pin="alertUser"></pin>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>
</body>
</html>
Сделанный.
Чтобы расширить это, вы также можете передать данные из входа в корневой экземпляр (родительский).
this.$emit.('incorrect-pin', this.pin)
Таким образом, вы можете обрабатывать данные контактов, как хотите. Далее мы поговорим об общении между детьми или братьями и сестрами.
Грасиас.
