When dealing with interactions, the front end often faces a question: How do components communicate with each other? The following describes several common communication modes of components, including parent and child components, sibling components, and different communication modes of complex components

  1. Modern communication: FLUX VUEX

    FLUX divides an application into four parts: documents

    1. View: The View layer
    2. Action: Messages sent by the view layer (such as mouseClick)
    3. Dispatcher: Receives Actions and performs callbacks
    4. Store (Data layer Model) : It is used to Store the status of the application and remind Views to update the page once it changes

    The biggest feature of Flux is one-way data flow. The specific flow is as follows:

    1. The user accesses the View,
    2. The View emits the user’s Action,
    3. Dispatcher receives Action requesting Store to update accordingly
    4. After the Store is updated, a “change” event is emitted
    5. View updates the page after receiving “change” event

    VUEX: Official documentation VUEX is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. We extract the shared state of the components and manage it in a global singleton mode, where our tree of components forms a giant “view” where any component can get state or trigger behavior no matter where it is in the tree! Note: Action can be asynchronous, but mutations must be synchronous

    For a VUEX application, the concept of FLUX is formulated as:

    1. VUE: the view layer
    2. Action: Messages sent by the view layer (such as mouseClick)
    3. Mutations: Uses it to accept Actions and execute the callback function
    4. State (Data layer Model) : Used to store the State of the application and remind Vue to update the page VUex in case of any change

  2. Parent-child component communication :props, Events

    Parent -> Child: The parent component uses props to pass data to the child component, as shown in cn.vuejs.org/v2/guide/co…

    <child message="hello!" ></child>Copy the code
    Vue.component('child', {// declare props: ['message'], // Just like data, prop can be used in templates // It can also be used in VM instances like "this.message" template: '<span>{{message}}</span>'})Copy the code

    It is important to note that a child component cannot modify the props of the parent component because there may be multiple child components under a parent component. If a child component modifies the props passed by the parent component, other child components may change as well. As a result, the state of the entire application is difficult to manage and maintain, so the child component is not allowed to modify the props

    Child -> Parent: Custom events for the child component. The parent component can listen for events triggered by the child component directly with v-on where the child component is used

    <div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>Copy the code
    Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})Copy the code

  3. Non-parent component communication: Event Bus

    Official documentation: cn.vuejs.org/v2/guide/co… Sometimes non-parent-child components also need to communicate. In a simple scenario, introduce the central event bus between the two components using an empty Vue instance as the central event bus, and then emit, on the corresponding events

    $emit('id-selected', 1); $emit('id-selected', 1); $emit('id-selected', 1); function (id) { // ... })Copy the code

  4. Form interaction: bidirectional binding

    Official documentation: cn.vuejs.org/v2/guide/co… In fact, VUE’s bidirectional binding is a syntactic sugar for events

    <input v-model="something">
<input v-bind:value="something" v-on:input="something = $event.target.value">
<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>Copy the code