Summary of methods of calling child components by vue parent component-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Summary of methods of calling child components by vue parent component

Apr 27, 2018 pm 04:47 PM

Summarize method transfer

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();
  }    
},

Copy after login

The parent component template

&lt;template&gt;
  &lt;x-button type=&quot;submit&quot; class=&quot;custom-primary&quot; @click.native=&quot;xiechengUpload&quot;&gt;上传图片&lt;/x-button&gt;
  &lt;up-load :fileInformation=&quot;fileInformation&quot; ref=&quot;uploadRef&quot;&gt;&lt;/up-load&gt;
&lt;/template&gt;

Copy after login

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);
},

Copy after login

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

Copy after login

Parent component:

&lt;child ref=&quot;child&quot; @click=&quot;click&quot;&gt;&lt;/child&gt;
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 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!