• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Component communication is a common scenario in VUE, and today we are going to discuss how components communicate with each other. Here are my six ways to communicate.

  1. Simple parent-child component communication: parent component props, child component EMIT

The parent component passes data to the child component through props, and the child component changes data by triggering the parent component method through $emit.

// This is pseudocode
/ / father
<template>
    <div>
        <Child :name="name" $changeChildName="changeName"/>
    </div>
</template>
<script>.methods: {
        changeName(name) {
            this.name = name
        }
    }
</script>
/ / child
<template>
    <div>
        {{ name }}
    </div>
</template>
<script>.methods: {
        changeChildName(name) {
            this.$emit('changeName'.'hello')}}</script>
Copy the code
  1. Components communicate with the EventBus

On receives messages, on receives messages, ON receives messages, and EMIT pushes messages to realize component communication.

// This is pseudocode
// Component A sends messages
<template>
    <div>.</div>
</template>
<script>.methods: {
        sendMsg(msg) {
            EventBus.$emit('message', msg)
        }
    }
</script>
// Component B accepts the message
<template>
    <div>.</div>
</template>
<script>.methods: {
        getMsg() {
            EventBus.$on('message'.(msg) = >{... }}})</script>
Copy the code

It should be noted that the communication is completed after the attention to useEventBus.$off()Removing the message bus

  1. vuex

The people also are familiar, mainly includes: the state, mutations, the actions, getters, modules of this a few parts. The following parts are explained separately. State: page state management container object. Centrally stores data for unified status management. The data required for display in page component communication is read from this object. Mutations: Changes the status of the operation, which is triggered by a commit in actions. Is the only recommended method for Vuex to modify state. This method can only perform synchronous operations, and the method name must be globally unique. Actions: State action processing module, triggered by $store.dispatch. The mutation call is then triggered by commit() to reach update state. Responsible for handling all interactions received by Vue Components. Requests to the background API are made in this module. Getters: We can think of getters as a computed property of the store. Modules: Different modules in a project can be divided into modules for state management.

  1. Dependency injection -provide/inject

This approach allows an ancestor component to inject a dependency into all of its descendants, no matter how deep the component hierarchy, for as long as the upstream and downstream relationship is established. Dependency injection is a one-way data flow, which has the advantage of uniform distribution of data. Rational use can provide great convenience.

// This is pseudocode
// provide data
// Grandfather component
<template>
    <div>.</div>
</template>
<script>
    provide: {
        message: 'Dependency injection'
    },
    methods: {... }</script>
// Inject data
// Grandchild component
<template>
    <div>{{message}} // shows dependency injection</div>
</template>
<script>
    inject: ['message'].methods: {... }</script>
Copy the code
  1. The parent/children with ref

Use refs to get action component property values or functions faster. Use children[I].[component name] to get the attribute value or function of a child component. $children returns an array of child components. With parent, the child component can get the data content that modifies the parent component.

These are just a few ways to communicate with vUE. Some of the changes in VUE 3.0 will be revised and updated in the future.