В предыдущем посте мы говорили о взаимодействии родительских и дочерних компонентов. Этот пост будет посвящен взаимодействию одноуровневых компонентов.
Итак, как мы можем добиться этого в vuejs? Простой. Каждый экземпляр vue может прослушивать события и может генерировать события. Мы рассмотрим простую реализацию использования этого в проекте.
Мы будем использовать два компонента, первый и второй (скрытый). Два компонента являются входными данными, которые представляют собой два шага. Первый шаг принимает пользовательский ввод, когда пользователь оставляет ввод, второй компонент уведомляется, и поэтому появляется второй шаг/ввод, и пользователь может продолжить.
Получить полный код можно на github:
Начальный код для 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 id="root" class="uk-section">
<div class="uk-container">
<one></one>
<two></two>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>
</body>
</html>
Стартовый код для app.js:
Vue.component('one', {
template: `
<div>
<p>Step 1: Enter a pin number: <input v-model="pin"> </p>
</div>
`,
data () {
return {
pin: ""
}
},
methods: {
}
})
Vue.component('two', {
template: `
<div v-if="showMessage">
<p>Step 2: Enter your username: <input> </p>
</div>
`,
data () {
return {
showMessage: false
}
},
mounted () {
},
methods: {
}
})
new Vue ({
el: '#root',
})
Способ добиться этого — создать пустой экземпляр Vue, который мы будем использовать для глобального запуска и прослушивания событий в любом месте, где это необходимо.
const event = new Vue(); //add this to top of our js file
Это сделает доступными для нас два метода:
event.$emit('event-name')
event.$on('event-name')
Примечание. Чтобы это работало правильно, мы должны убедиться, что это событие доступно глобально. Как вы это сделаете, будет зависеть от структуры вашего приложения. В приложениях на основе модулей вы экспортируете этот экземпляр экземпляра vue, который мы используем в качестве события, из определенного файла, а затем импортируете его туда, где это необходимо. По мере роста сложности вашего приложения вы можете использовать для этого Vuex.
Продолжите наш проект, обновите шаблон компонента 1 до этого:
<div>
<p>Step 1: Enter a pin number: <input v-model="pin" @blur="goToStepTwo"> </p>
</div>
и это метод для этого:
methods: {
goToStepTwo () {
event.$emit('step-two');
}
}
Таким образом, после того, как пользователь вводит и оставляет ввод, вызывается метод goToStepTwo, который запускает событие под названием «шаг-два».
Чтобы появился второй вход, второй компонент должен прослушивать событие «шаг-два». Как? Обновите второй метод компонента следующим образом:
mounted () {
event.$on('step-two', () => this.alertMessageReceived())
},
При монтировании второго компонента он должен прослушивать событие, называемое step-two. Как только это событие будет получено, второй компонент вызовет метод alertMessageReceived, чтобы отобразить входные данные для второго шага.
methods: {
alertMessageReceived () {
this.showMessage = true
}
}
Сделанный! Мы добились взаимодействия между компонентами в vuejs.
