Недавно начала изучение Vue и в обучающем видео увидела то, что меня смутило: "window.Event = new Vue()". Пожалуйста, помогите понять:
1) что представляет собой window.Event,
2) для чего создаётся новый корневой элемент, почему у него нет el
3) для чего нужно прослушивание? В данном случае для обеспечения взаимодействия между родительским и дочерним компонентами? Почему прослушивание в родительском компоненте?
Далее представлен код.
<!DOCTYPE html>
<head>
<title></title>
<link rel='stylesheet' href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
<style type="text/css"> body { padding-top: 40px; }
</style>
</head>
<body>
<div id="root" class = 'container'>
<coupon @applied="onCouponApplied"></coupon>
<h1 v-if="couponApplied">You used a coupon!</h1>
</div>
<script src ="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script>
window.Event = new Vue();
Vue.component('coupon', {
template: `
<input placeholder = "Enter your coupon code." @blur="onCouponApplied">
`,
methods: {
onCouponApplied() {
this.$emit('applied');
}
}
});
new Vue({
el: '#root',
data: {
couponApplied: false
},
created() {
Event.$on('applied', () => alert('Handling it!'));
}
});
</script>
</body>
</html>
Средний
Средний