Question: is window.Event = new Vue() just a name or something more?

U

ufffff2020-06-17 04:00:34

JavaScript

ufffff, 2020-06-17 04:00:34

I recently started learning Vue and in the tutorial video I saw something that confused me: "window.Event = new Vue()". Please help me understand:
1) what is window.Event,
2) what is the new root element created for, why doesn't it have el
3) what is the listener for? In this case, to ensure communication between the parent and child components? Why listen in parent component?
The following is the code.

<!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/[email protected]/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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Aetae, 2020-06-17
@ufffff

From a functional point of view, this is just a global variable , in which an empty Vue instance was placed in order to use the built-in ability to create and process events in Vue, thus obtaining a global data bus that can be used to exchange events between several components.
From the point of view of choosing a name Eventfor a global variable, this is a failure and incompetence, because window.Eventwe have our own parent class for all javascriptevents, which can be used by third-party libraries.