情景:

創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網(wǎng)站建設、網(wǎng)站重做改版、雨花網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、HTML5、商城網(wǎng)站建設、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為雨花等各大城市提供網(wǎng)站開發(fā)制作服務。

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

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

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

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

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

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

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

父組件template

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

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

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

下面看下Vue父組件調用子組件事件

Vue父組件向子組件傳遞事件/調用事件

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

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

方法二：父組件調用子組件方法

子組件：

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

父組件：

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

總結

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