Introduction to synchronous transmission and asynchronous transmission of Vue parent-child components (with code)

This article brings you an introduction to synchronous transmission and asynchronous transmission of Vue parent-child components (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Synchronously transfer data

The parent component food passes the type field with a value of 0 to the child component through props. The child component can get the type field during initialization. , rendering the character "0 fruit"

// 父组件 food.vue
<template>
  <apple :type="type"></apple>
</template>
<script>
    data (){
        return {
          type: 0
      };
      }
</script>
// 子组件 apple.vue
<template>
  <span>{{childType}}</span>
</template>
<script>
   props: ['type'],
   created () {
           this.childType = this.formatterType(type);
   },
   method () {
           formatterType (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
   }
</script>

2 Asynchronous transmission of data

To ensure asynchronous transmission of data, according to the two-way binding principle of VUE, it is not difficult to know that asynchronous The data passed requires watch.

2.1 props

If the data passed by props is associated with the template, the data will be watched when the component is initialized. You can see type and info in the code below.
If the data passed by props is not associated with the template, add a watch for the data passed by props, and modify the object associated with the template in the watch method. You can see the child_type in the code below. In this method, what the watch monitors is the changed props, so the target object needs to be initialized.

// 父组件 food.vue
<template>
  <apple :type="type" :info="info"></apple>
</template>
<script>
  data (){
    return {
      type: 0,
      info: {comment: 'ugly food'}
    };
  }
  created () {
      setTimeout (()=>{
        this.type = 1;
      this.info = {comment: 'tasty food'};
    },1000);
  }
</script>
// 子组件 apple.vue
<template>
  <p class="memuManage">
    <span>type: {{child_type}}</span>
    <span>type: {{type|formatterType}}</span>
    <span>info: {{info.comment}}</span>
  </p>
</template>
<script>
  export default {
    data () {
      return {
        child_type: ''
      };
    },
    props: ["type","info"],
    watch: {
      type (newVal) {
        this.child_type = this.formatterType(newVal);
      }
    },
    created () {
      this.child_type = this.formatterType(this.type);
    },
    filters: {
      formatterType: function (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    },
    methods: {
      formatterType (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    }
  };
</script>

2.2 vuex

The data is stored in the store, and the parent component calls methods in vuex to change the data.
If the store data is associated with the template of the subcomponent, the data will be watched when the subcomponent is initialized.
If the store data is not associated with the template of the subcomponent, add a watch for the store data, and modify the associated template object in the watch method. The object associated with the template needs to be initialized.

3. Transfer data synchronously or asynchronously

If the parent component may transfer data synchronously or asynchronously to the child component, first the child component needs to match the target in created or computed The object is initialized, and the child component needs to watch the data passed by props and modify the target object.

The above is the detailed content of Introduction to synchronous transmission and asynchronous transmission of Vue parent-child components (with code). For more information, please follow other related articles on the PHP Chinese website!