vue组件之间的传值方式（VUE组件之间的参数传递与方法调用）
导读：父组件向子组件...
父组件向子组件
父组件向子组件传参：父组件中的子组件标签中增加 :param="param"
子组件中增加 props 接受参数（注意props需要与data同级）
父组件调用子组件方法：父组件中子组件的标签增加 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
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！