父組件向子組件
-
父組件向子組件傳參：父組件中的子組件標簽中增加 :param="param"
子組件中增加 props 接受引數（注意props需要與data同級）
props: { param: { type: Object } }, data() { return { ... } },
-
父組件呼叫子組件方法：父組件中子組件的標簽增加 ref="abc"
例如：
<child ref="abc"></child>
然后在父組件中使用 refs直接呼叫子組件方法
例如：
this.$refs.abc.XXX()
子組件呼叫父組件方法
-
父組件中子組件的標簽注冊方法 @abc="XXX"
子組件中使用$emit 呼叫父組件方法
例如：
// 無參 this.$emit('abc') ? // 帶參 this.$emit('abc', {params})
-
子組件使用$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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539064.html
標籤：其他