Detailed explanation of communication between hierarchical nested components in Vue front-end development

Preface

Vue parent-child components can easily pass the value of the parent component to the child component through props. If a component is nested in many layers, each layer needs to pass the value with the same props, which is troublesome and difficult to maintain.

Example

[Example] Component A uses component B, and component B uses component C. Component C needs to use component A's data text and component A's method getmethod. The code of component A is as follows:

<template>
  <div>
    <P>This is component A</P>
    <v-comb></v-comb>
  </div>
</template>
<script>
  import comB from '@/view/comB.vue'
  export default {
    name: 'comA',
    components:
      'v-comb': comB
    },
    data() {
      return {
        msg: 'I am the data in component A'
      }
    },
    provide: function() { //Inject properties and methods into child components return {
        text: this.msg,
        getMethod: function() {
          console.log('Execute the getMethod method in the root component')
        }
      }
    }
  }
</script>

Use the keyword provide to expose data and methods to child components
Component B is a child component of component A and a parent component of component C. The code is as follows

<template>
  <div>
    <div>
      <P>This is component B</P>
      <v-comc></v-comc>
    </div>
  </div>
</template>
<script>
  import comC from '@/view/comC.vue'
  export default {
    name: 'comB',
    components:
      'v-comc': comC
    }
  }
</script>

Component C is the grandchild of component A. Component C needs to use the data and methods of component A. The code is as follows:

<template>
  <div style="border:1px solid orange;color:orange;">
    <div>
      <P>This is a C component</P>
      <div>{{text}}</div>
      <button @click="getMethod">Call parent component method</button>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'comC',
    inject: ['text', 'getMethod'] //text and getMethod are the names provided by provider}
</script>

The inject keyword is used here to receive the information exposed by component A. Pay special attention here that the name received in inject: [] must be exactly the same as the name provided by provide.

Run, the interface is as shown below

summary

For multi-level nested component communication, Vue uses the provide & inject keywords to directly transfer values ​​from parent components to child components, which is very convenient to use. There is a strong coupling relationship between the problematic subcomponent and the parent component, and it is not recommended to use it unless it is absolutely necessary.

The above is the detailed content of the detailed explanation of the communication of hierarchical nested components in Vue front-end development. For more information about the communication of hierarchical nested components in Vue, please pay attention to other related articles on 123WORDPRESS.COM!