vue 组件传参func用法
vue 组件传参func用法使用场景:比如一个button组件里面有一个loading属性,在父组件中如何去改变loading的值,一种是通过props去改变,另外一种可以通过func暴露整个组件对象来实现。button.vue<button @click="handleClick"><butto
·
vue 组件传参func用法
使用场景:比如一个button组件里面有一个loading属性,在父组件中如何去改变loading的值,一种是通过props去改变,
另外一种可以通过func暴露整个组件对象来实现。
button.vue
<button @click="handleClick"><button>
props:{
funcProps: {
type: Object,
default: () => ({})
}, // 外部传给按钮的参数,供按钮事件执行时调用
func: Function // 按钮事件,按钮点击或其他方式触发时执行
}
data(){
return{
loading: false
}
},
methods:{
handleClick(){
this.func({
funcProps: {
button: this
}
})
}
}
用法:
<Button :func="handleClick"></Button>
menthods:{
handleClick({funcProps}){
// funcProps 为子组件实例对象
funcProps.button.loading = true
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)