如何在Vuejs中将反应性道具传递给孩子

Question

我创建了一个可重用的模式，我想在其中传递道具:loading="loading"。但截至目前，在 data 中初始化的 loading 属性不是响应式的。如何更新父组件中的加载，使其在子组件中具有反应性？

父组件模板：

<child_component :loading="loading"></child_component>

父组件脚本：

     data() {
            return {
                loading: false
            }
        },

          onDelete() {
                this.loading = true;
                setTimeout(function(){ alert("Hello"); }, 3000);
                this.loading = false;
            },

孩子：

       <v-btn icon
           :loading="loading"
            <v-icon>{{icon}}</v-icon>
       </v-btn>

        ...

props: { disabled: { Boolean, default: false } }

Answer 1

将this.loading = false; 移动到setTimeout 中，并使用我在下面使用的箭头功能，否则您将无法引用this。

onDelete() {
  this.loading = true;
  setTimeout(() => { this.loading = false; }, 3000);
}