vue parent component calls child component methods and events

This article mainly introduces the relevant information about vue parent components calling sub-component methods and events. The parent component passes in the array sub-component loop to create different component modules. All events are inside the sub-component. How to implement such a function

Scenario:

The parent component introduces the sub-component for uploading attachments: click on the component to upload the corresponding required pictures respectively, inside the sub-component Loops can create multiple modules.

The parent component passes in the array and the child component loops to create different component modules. All events are inside the child 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:

Idea: click the button in the parent component to trigger the child component Medium upload method:

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

Method for processing upload in child component:

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

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>

Define the method in the parent component method and pass in the corresponding index value.

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

At this time, you can put the image through the upload button Now in the first module of the sub-component.

Let’s see how the Vue parent component calls the sub-component event

The Vue parent component calls the sub-component event Component passing event/calling event

is not passing data (props), it is applicable to Vue 2.0

Method one: the child component listens to the method sent by the parent component

Method two: Parent component calls 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(&#39;childMethod&#39;) // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of nodejs rendering page resources through response writeback

vue drop-down list function example code

Detailed explanation of angular2 modules and shared modules

##

The above is the detailed content of vue parent component calls child component methods and events. For more information, please follow other related articles on the PHP Chinese website!