vue 组件传参func用法

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
    }
}