Share two methods of dynamically passing values ​​from Vue parent components to child components

In some project requirements, the parent component needs to dynamically transfer values ​​​​to the child component. For example, my requirement here is that the parent component dynamically obtains the returned image url array through axios and then passes it to the child component. The child component that uploads the image gets the After the array is traversed and the picture is displayed. This article mainly introduces two methods for dynamically transferring values ​​​​from Vue parent components to child components. Friends who need it can refer to it. I hope it can help everyone.

There are two methods,

Method 1:

props pass value, pay attention to a problem here, the passed value needs to be monitored and assigned with watch, otherwise it will be obtained here is an empty array

Parent component:

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

this.productImage=res.data.cover;

Here, assign the array returned through the background to

this.productImage, and then pass the array to the props defined by the child component Attribute src-list

Subcomponent:

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

Then the subcomponent successfully obtains the array

Method 2:

Through the ref attribute, the parent component calls The method of the subcomponent passes the array to be passed as a parameter to the subcomponent. The subcomponent gets the parameter and uses

Parent component:

this.$refs.productImage.getSrcList(res.data.cover);

Child component:

getSrcList(val){
  this.uploadImg=val;
}

PS: Let’s look at the vuejs dynamic component passing data to the sub-component

The props when the sub-component is defined can support the parent component to pass data to the sub-component. These defined props are bound in the tag of the sub-component. Attributes are enough, but if you are using a dynamic component, there will be no explicit sub-component tags at this time. To pass data to the sub-component, you need to bind it in

  <p class="app" id="deviceready">
    <component :is="currentView" :user_name.sync="user_name" :DOB.sync="DOB"></component>
  </p>

The function of the component is independent. The function of the component is independent. If you want to obtain data from the component, you need to pass it layer by layer. That is to say, the child component can only obtain data from the direct parent component. , if it is the data of the root component, then the parent component must continue to expose pops to bind the data from the root component.

Related recommendations:

The above is the detailed content of Share two methods of dynamically passing values ​​from Vue parent components to child components. For more information, please follow other related articles on the PHP Chinese website!