欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

情景:

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

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

　　父組件頁面的上方同時(shí)有一個(gè)上傳圖片按鈕上傳圖片后會(huì)顯示在第一個(gè)模塊:

　　設(shè)想思路:點(diǎn)擊父組件中的按鈕觸發(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)前框里沒有圖片,則實(shí)現(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中定義方法,同時(shí)傳入相應(yīng)的index值.

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

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

下面看下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)用子組件方法及事件，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論