快捷導(dǎo)航

vue 父組件調(diào)用子組件方法及事件

更新時間：2018年03月29日 14:19:20 作者：且醉

這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實現(xiàn)這樣一個功能呢？接下來跟隨腳本之家小編一起看看吧

情景:

　　父組件中引入上傳附件的子組件:點擊組件可以分別上傳對應(yīng)要求的圖片,子組件內(nèi)部循環(huán)可創(chuàng)建多個模塊.

　　父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.

　　父組件頁面的上方同時有一個上傳圖片按鈕上傳圖片后會顯示在第一個模塊:

　　設(shè)想思路:點擊父組件中的按鈕觸發(fā)子組件中上傳方法:

　　子組件上定義ref="refName",父組件的方法中用this.$refs.refName.method去調(diào)用子組件方法

　　子組件中處理上傳的方法:　　

 fileClick(index) {
   console.log('子組件的fileClick被調(diào)用了')
   console.log('index:  '+index)
   // this.aaa();
   if(!this.fileInfor[index].imgUrl){
   //如果當(dāng)前框里沒有圖片,則實現(xiàn)上傳
   document.getElementsByClassName('upload_file')[index].click();
  }    
},

　　父組件template

<template>
  <x-button type="submit" class="custom-primary" @click.native="xiechengUpload">上傳圖片</x-button>

  <up-load :fileInformation="fileInformation" ref="uploadRef"></up-load>
</template>

　　父組件method中定義方法,同時傳入相應(yīng)的index值.

Upload(){
  // console.log('父組件的xiechengUpload被調(diào)用了')
  this.$refs.uploadRef.fileClick(0);
},

此時就可以通過上傳按鈕將圖片放到子組件的第一個模塊中了.

下面看下Vue父組件調(diào)用子組件事件

Vue父組件向子組件傳遞事件/調(diào)用事件

不是傳遞數(shù)據(jù)（props）哦，適用于 Vue 2.0

方法一：子組件監(jiān)聽父組件發(fā)送的方法

方法二：父組件調(diào)用子組件方法

子組件：

export default {
  mounted: function () {
   this.$nextTick(function () {
    this.$on('childMethod', function () {
     console.log('監(jiān)聽成功')
    })
   })
  }，
  methods {
    callMethod () {
     console.log('調(diào)用成功')
    }
  }
}

父組件：

<child ref="child" @click="click"></child>
export default {
  methods: {
   click () {
   this.$refs.child.$emit('childMethod') // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

總結(jié)

以上所述是小編給大家介紹的vue 父組件調(diào)用子組件方法及事件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: