How to use vue parent component to call child component (code attached)

This time I will show you how to use the vue parent component to call the subcomponent (with code). What are the precautions for using the vue parent component to call the subcomponent. The following is a practical case, let's take a look.

Scenario:

Introducing sub-components for uploading attachments into the parent component: clicking on the component allows you to upload images corresponding to the requirements respectively, and the sub-component internally loops Multiple modules can be created.

The parent component passes the array into the child component loop to create different component modules. All events are inside the child component.

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 idea: Click the button in the parent component to trigger the child component 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

Methods for processing uploads in child components:

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 methods in parent component method and pass in the corresponding index value.

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

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

Let’s look at the Vue parent component calling the subcomponent event

Vue parent component passes events/calls events to child components

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

Method 1: Child component listens to parent component Method of sending

Method 2: 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('childMethod') // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

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

Recommended reading:

Use postman json springmvc to make batch additions

How to package and optimize webpack4.0

The above is the detailed content of How to use vue parent component to call child component (code attached). For more information, please follow other related articles on the PHP Chinese website!