Vue parent component calls child component practical case

This time I will bring you a practical case of vue parent component calling subcomponent. What are the precautions of the practical case of vue parent component calling subcomponent. The following is a practical case, let's take a look.

Scenario:

Introducing the sub-component of Upload attachments into the parent component: Click on the component to upload the corresponding requirements respectively Pictures, sub-component internal loops can create multiple modules.

The parent component passes an array into the sub-component loop to create different component modules, and alleventsare inside the sub-components.

There is also an upload image button at the top of the parent component page. After uploading the image, it will be displayed in the first module:

Imagine Idea: Click the button in the parent component to trigger the upload method in the child component:

Define ref="refName" on the child component, use this.$refs in the method of the parent component .refName.methodTo call the subcomponent method

The method of processing upload in the subcomponent:

 fileClick(index) {
   console.log('子组件的fileClick被调用了')
   console.log('index:  '+index)
   // this.aaa();
   if(!this.fileInfor[index].imgUrl){
   //如果当前框里没有图片,则实现上传
   document.getElementsByClassName('upload_file')[index].click();
  }    
},

The parent component template

<template>
  <x-button type="submit" class="custom-primary" @click.native="xiechengUpload">上传图片</x-button>
  <up-load :fileInformation="fileInformation" ref="uploadRef"></up-load>
</template>

The method defined in the parent component method, At the same time, pass in the corresponding index value.

Upload(){
  // console.log('父组件的xiechengUpload被调用了')
  this.$refs.uploadRef.fileClick(0);
},

At this time, you can put the image into the first module of the subcomponent through the upload button.

See below Next, Vue parent component calls child component events

Vue parent component passes events/calls events to child components

It is not about passing data (props), it is suitable for Vue 2.0

Method 1: The child component listens to the method sent by the parent component

Method 2: The parent component calls the child component method

Child component:

export default {
  mounted: function () {
   this.$nextTick(function () {
    this.$on('childMethod', function () {
     console.log('监听成功')
    })
   })
  }，
  methods {
    callMethod () {
     console.log('调用成功')
    }
  }
}

Parent component:

<child ref="child" @click="click"></child>
export default {
  methods: {
   click () {
   this.$refs.child.$emit('childMethod') // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

html5 canvas dynamically implements the pie chart steps detailed explanation

pushState and replaceState usage steps detailed explanation

The above is the detailed content of Vue parent component calls child component practical case. For more information, please follow other related articles on the PHP Chinese website!