快捷導(dǎo)航

Vue組件之間的參數(shù)傳遞與方法調(diào)用的實(shí)例詳解

更新時(shí)間：2022年12月05日 09:26:10 作者：喵醬愛(ài)吃魚(yú)

這篇文章主要介紹了Vue組件之間的參數(shù)傳遞與方法調(diào)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

父組件向子組件

1.父組件向子組件傳參：父組件中的子組件標(biāo)簽中增加 :param="param"

子組件中增加 props 接受參數(shù)（注意props需要與data同級(jí)）

props: {
  param: {
    type: Object
  }
},
data() {
    return {
        ...
    }
},

2.父組件調(diào)用子組件方法：父組件中子組件的標(biāo)簽增加 ref="abc"

例如：

<child ref="abc"></child>

然后在父組件中使用 refs直接調(diào)用子組件方法

例如：

this.$refs.abc.XXX()

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

1.父組件中子組件的標(biāo)簽注冊(cè)方法 @abc="XXX"

子組件中使用$emit 調(diào)用父組件方法

例如：

// 無(wú)參
this.$emit('abc')
?
// 帶參
this.$emit('abc', {params})

2.子組件使用$parent

例如：

// 方法
    this.$parent.abc()  
    
    // 屬性
    this.$parent.abcd = 1

其它組件間調(diào)用

可以使用EventBus

在被調(diào)用的組件中使用EventBus.$on，在調(diào)用的組件中使用EventBus.$emit

例如：

被調(diào)用的組件中：

created() {
    EventBus.$off('Name')
    EventBus.$on('Name', (data1, data2) => {
        this.method(data1,data2)
    })
}

調(diào)用的組件中：

EventBus.$emit('Name', res.data.list, flag)

補(bǔ)充：

props的幾種寫(xiě)法：

// 默認(rèn)寫(xiě)法
  props: {
    btnClick: {
      type: Function,
      default: function() {}
    },
    titleName: {
      type: String,
      default: "內(nèi)容"
    },
    display: {
      type: String,
      default: "table" 
    },
    columnNum: {
      type: Number,
      default: 1
    },
    columnslist: {
      type: Array,
      default() {
        return [];
      }
    },
    showPage: {
      type: Boolean,
      default: true
    },
    apiData: {
      type: Object,
      default() {
        return {};
      }
    },
    param: {
      type: Object,
      default() {
        return {};
      }
    },
    defaultParam: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },

注意：如果默認(rèn)值的類型為數(shù)組或者對(duì)象的話，一定要在函數(shù)中返回這個(gè)默認(rèn)值，而不是直接寫(xiě)，否則會(huì)報(bào)錯(cuò)

// 正確：
 datalist:{
     type:Array,
     default:function(){
         return []
     }
 }
?
// 錯(cuò)誤
 datalist:{
     type:Array,
     default:[]
 }
 
// 或者直接跟上面第一個(gè)代碼一樣，不管什么類型，都寫(xiě)在函數(shù)返回中。

補(bǔ)充2：VUE 父組件動(dòng)態(tài)傳值給子組件

http://chabaoo.cn/article/127980.htm

到此這篇關(guān)于Vue組件之間的參數(shù)傳遞與方法調(diào)用的實(shí)例詳解的文章就介紹到這了,更多相關(guān)vue參數(shù)傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: