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

Posted 2023-03-07

【中文标题】如何在Vuejs中将反应性道具传递给孩子

【英文标题】：How to pass a reactive prop to child in Vuejs

【发布时间】：2020-07-04 07:01:32

【问题描述】：

我创建了一个可重用的模式，我想在其中传递道具: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  

【参考方案1】：

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

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