Several ways to dynamically pass values ​​in vue parent-child components and detailed explanation of the issues to pay attention to

Two ways to dynamically pass values ​​to child components

In some project requirements, the parent component needs to dynamically pass values ​​to the child component. For example, my requirement here is that the parent component dynamically passesaxiosGet the returned image url array and then pass it to the subcomponent. The subcomponent that uploads the image will traverse and display the image after receiving the array. Because sometimes what is obtained will be empty, dynamic acquisition should be considered here.

There are two methods,

Method 1 of the method of dynamically passing values ​​to children:

Props pass values. Pay attention to a problem here. The passed value needs to be monitored and assigned with watch, otherwise what you get here is an empty array

Parent component:

<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list=""></uploadImg>
=;

Here, the array returned through the background is assigned to the array, and then the array is passed to the props attribute src-list defined by the child component.

export default {
  name: '***',
  props: {
    srcList: {

    }
  },
  data() {
  	uploadImg: ''
  }
}

Subcomponents:

Watch code

watch:{
    srcList(curVal,oldVal){
     if(curVal){
       =curVal;
      }
   },
}

Method 2 of the method of dynamically passing value to the child component:

Through the ref attribute, the parent component calls the method of the child component, passes the array to be passed as a parameter to the child component, the child component obtains the parameter and uses

Parent component:

this.$();

Subcomponents:

getSrcList(val){
=val;
}

Similarly, if the child component passes the value to the parent component, if it is dynamically changed, remember to add the watch function. The operations performed after the dynamic change are written in the watch, such as the function of this.$emit!

Get data from child components in parent components

<FormItem label="Upload avatar" prop="image">
  <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg>
</FormItem>
<FormItem label="Upload business license" prop="businessLicence">
  <uploadImg :width="350" :height="200" :name="'businessLicence'" size="350px*200px" ref="businessLicence"></uploadImg>
</FormItem>

I wrote a child component to upload pictures myself. The parent component needs to obtain the image address uploaded by the child component.

Method 1 of the method to obtain data from the child component in the vue parent component:

Add the corresponding subcomponent labelref = “avatar”

The parent component can obtain this.$. corresponding data when the last submission is made, because it is here to ensure that the image has been uploaded. Otherwise, if the image is not uploaded, the value obtained must be empty.

Method 2 of the data from the child component obtained from the vue parent component:

$emit()

/*
     Subcomponents
 */
<template>
    <input type='file' @change="changeUrl" />
</template>
<script>
export default {
    methods: {
        changeUrl(e) {
            this.$emit('changeUrl', [0].path)
        }
    }
}
</script>

/*
     Parent component
 */
<template>
    <FormItem label="Upload business license" prop="businessLicence">
        <uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
    </FormItem>
</template>
<script>
export default {
    methods: {
        getUrl(path) {
            //This is the path you want, and it will be bound in two directions        }
    }
}
</script>

When using this.$emit method to obtain, if the child component wants to pass multiple values ​​to the parent component, it can write multiple parameters. The parent component can obtain the values ​​of multiple parameters when obtaining them.

// Parent componentgetUrl(path1，path2) {
(path1,path2)
}

Note the problem:

1. The corresponding event of the parent component is written on the child component.
2. If the subcomponent does not trigger the click event, and there is no change event similar to this example, the input needs to trigger the change event, then let the function load in the created or mounted function.
3. The child component must be used to pass the value to the parent component. If multiple parent components refer to the child component, only the child component used when passing the value comes from which parent component, the parent component can receive the value, and other parent components cannot obtain the value transmitted by the child component.

The above are the detailed explanations of several ways to dynamically transmit values ​​of vue parent-child components and the attention issues. For more information about several ways to dynamically transmit values ​​of vue parent-child components, please pay attention to my other related articles!