Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-06-12 14:52:25
Original
1776 people have browsed it

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>
Copy after login

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

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

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('调用成功')
    }
  }
}
Copy after login

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
  }
}
Copy after login

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!

Related labels:
vue
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template