目录父组件向子组件子组件调用父组件方法其它组件间调用补充:父组件向子组件 1.父组件向子组件传参:父组件中的子组件标签中增加 :param="param" 子组件
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://www.jb51.net/article/127980.htm
到此这篇关于Vue组件之间的参数传递与方法调用的实例详解的文章就介绍到这了,更多相关vue参数传递内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue组件之间的参数传递与方法调用的实例详解
本文链接: https://www.lsjlt.com/news/174250.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0