如何在不添加我自己的 prop 的情况下将内置的 Vuetify 组件 prop 从其父级应用到 SFC 的根元素？

Posted 2023-02-22

【中文标题】如何在不添加我自己的 prop 的情况下将内置的 Vuetify 组件 prop 从其父级应用到 SFC 的根元素？

【英文标题】：How can I apply a built-in Vuetify component prop to the root element of an SFC from its parent, without adding my own prop?

【发布时间】：2020-10-28 05:13:53

【问题描述】：

我有一个单文件组件SitesCard，它只是一个自定义的v-card：

<template>
  <v-card>
   // ...
  </v-card>
</template>

v-card 是一个 Vuetify 组件，它接受一个布尔值 loading 属性。见the Vuetify card docs。

当我使用这个SitesCard 组件时，我希望能够直接在SitesCard 上设置loading boolean prop，我尝试过以下方式：

<SitesCard :loading="true" />
// OR
<SitesCard v-bind:loading="true">

我觉得这应该是可能的，因为 <v-card> 是 SitesCard 的根元素，所以 Vue/Vuetify 应该知道将该属性应用于 <v-card>。但它似乎不是那样工作的。仅当我从 SitesCard SFC 中设置 <v-card> 的 loading 属性时，才会出现加载指示器。

我有大量自定义 SFC <v-card>s，我想通过它们的父组件来控制它们的加载状态。

有没有办法让 Vue 将像 loading 这样的内置 Vuetify 道具应用到像这样的 SFC 的根元素？还是我必须手动传入我自己的 loading 属性，然后在 SFC 中设置 <v-card> 的 loading？

【问题讨论】：

只是好奇，为什么不用道具呢？

@Goofballtech 看起来 Vue 应该知道将道具应用于根元素，而不是必须声明和使用仅用于设置另一个道具的道具。

我不知道如果它自动完成我会喜欢那个。然后，如果您碰巧在道具名称或某些东西上有重叠，它可能会应用您认为不会应用的东西。可能只是我，但我更喜欢非常明确。

【参考方案1】：

如果你真的不想使用 props，可以使用 store.js 文件或vuex 作为状态管理工具，而使用计算属性。

从父组件（或从您的应用程序中的任何地方）提交突变，子组件将对计算属性的更改做出反应。

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store(
  state: 
    loading: false
  ,
  mutations: 
    isLoading (state) 
      state.loading = !state.loading
    
  
)

在您的应用中的任何位置：

this.$store.commit('isLoading')

在您的组件中：

computed: 
    loading () 
      return this.$store.state.loading
    

编辑：另一种避免使用道具的方法，您可以在子组件中编写一个方法来更新加载变量和call the method from the parent component。 但是，我看不到使用它而不是道具的任何好处。

【讨论】：

赞成，因为这确实满足了不为设置另一个道具而声明我自己的道具的要求，尽管在我的情况下，目标是编写 less 代码，希望通过能够将 props 从父级直接传递到 SFC 的根元素。我想也许现在用 Vue 是不可能的。

确实，除非您使用 store 来进行横向数据流，否则唯一可能的流是向上或向下 Vue 实例的组件树。

【参考方案2】：

把它当作道具。

<SiteCard :cardLoading="showLoading">

data: 
  showLoading = false

<v-card :loading="cardLoading">

props: 
  cardLoading: 
    type: Boolean,
    default: false
  

对不起，糟糕的代码。在移动。希望这可以为您提供布局。

当您在父级上切换 sjow 加载道具时，它会更改道具。然后 prop 将该值传递给 v-card 组件上的 loading prop，或在子组件中使用该 var 的任何其他组件。

edit* 更直接地回答问题。我知道没有办法让 vue 假设传递的任何道具都转到根元素。我在这里更改了 var 名称以进行说明，但它们都可以是 :loading="loading" 并且工作正常，因此一旦设置了子项，它对父项将是不可见的，您手动将其作为道具进行。

是的。我确实过早地停止阅读标题并直接进入问题。我什至没有看到标题的“不使用道具”部分。