VUE組件之間的參數傳遞與方法調用

父組件向子組件

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

子組件中增加 props 接受參數（註意props需要與data同級）

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

2. 父組件調用子組件方法：父組件中子組件的標簽增加 ref="abc"

例如：

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

然後在父組件中使用 refs直接調用子組件方法

例如：

this.$refs.abc.XXX()

子組件調用父組件方法

1. 父組件中子組件的標簽註冊方法 @abc="XXX"

子組件中使用$emit 調用父組件方法

例如：

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

2. 子組件使用$parent

例如：

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

其它組件間調用

可以使用EventBus

在被調用的組件中使用EventBus.$on，在調用的組件中使用EventBus.$emit

例如：

被調用的組件中：

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

調用的組件中：

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

補充：

props的幾種寫法：

// 預設寫法
  props: {
    btnClick: {
      type: Function,
      default: function() {}
    },
    titleName: {
      type: String,
      default: "內容"
    },
    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;
      }
    }
  },

註意：如果預設值的類型為數組或者對象的話，一定要在函數中返回這個預設值，而不是直接寫，否則會報錯

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

補充2：VUE 父組件動態傳值給子組件

https://blog.csdn.net/qq_36990177/article/details/109882020

本文來自博客園，作者：喵醬愛吃魚，轉載請註明原文鏈接：https://www.cnblogs.com/zhangyuanmingboke/p/16944177.html