Summary of methods of calling child components by vue parent component

This time I will bring you a summary of the methods of calling subcomponents by vue parent components. What are the precautions for calling subcomponents by vue parent components? 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 all

eventsare 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:

Detailed explanation of Element Traversal implementation of element traversal

Detailed explanation of the steps of passing values ​​from the vue parent component to the parent component

The above is the detailed content of Summary of methods of calling child components by vue parent component. For more information, please follow other related articles on the PHP Chinese website!