组件封装的问题

Question

这个确定的loading如何封装
现在，我

<子组件 :loading=loading>

在子组件中

data() {
  return {
    newLoading: false,
  }
},
props: ['loading'],
watch(){
   // 监听了loading，将值赋值给了newLoading
}

但是当点击按钮的时候，提交数据给父组件，然后父组件把 loading 再传给子组件，因为loading没有变化，导致没法更新按钮的状态

我用了数字代替了布尔值，给 loading 一个数字，进行判断，但是感觉好 low，有没有简单的办法解决

Answer 1

一般不需要专门去监听，可以用 computed 属性来实现双向赋值。顺便，名字不要取 newLoading，意义不太明确，不知道为什么 new

computed: {
    loadingValue: {
        get() { return this.loading; }
        set(value) { this.$emit("update:loading", value); }
    }
}

然后在属性那里使用双向绑定标识（Vue2)

<child :loading.sync="loading" />

或 (Vue3)

<child v-model:loading="loading" />

Answer 2

因为你在子组件直接改变 newLoading 的时候没有通知父组件，导致了父组件 loading 为 true，而子组件的 newLoading 为 false 的情况的出现。

你用该将子组件的 newLoading 的变化通过事件抛出:

{
  watch: {
    newLoading(value) {
      this.$emit('loading-change', value)
    }
  }
}

然后在父组件监听事件保证 loading 和子组件内部的状态是同步的：

<Child :loading="loading" @loading-change="loading = $event" />