动态 Vue 组件中的 Vuetify 主题答案

【问题标题】：Vuetify theme in dynamic Vue Component动态 Vue 组件中的 Vuetify 主题
【发布时间】：2020-08-16 04:43:21
【问题描述】：

如果我动态创建一个 Vue 组件（使用 Vue.extend 并调用构造函数），它不知道 Vuetify 主题。如何将 Vuetify 注入到新的动态创建的组件中？

【问题讨论】：

您不能将整个 Vuetify 库注入到单个动态创建的组件中。
那么有什么方法可以告诉一个新的 Vue 组件关于 Vuetify 的信息吗？如何使新组件具有响应性，以便我可以使用 Vuetify 更改主题？

【解决方案1】：

解决方案是不动态创建组件，而是将组件添加到数组中并在正文中使用 v-for 来迭代它们。使用 Muuri 的另一个技巧是等待下一个滴答声，以便 Vuetify 可以在我们将组件添加到 Muuri 网格之前挂载它。

模板：

 <div class="grid">
  <div
    class="item"
    v-for="(def, index) in definitions"
    :key="index"
    ref="gridItem"
  >
    <div class="item-content">
      <CosmosScreen :definition="def" />
    </div>
  </div>
</div>

脚本：

import CosmosScreen from './CosmosScreen'
import * as Muuri from 'muuri'

export default {
  components: {
    CosmosScreen
  },
  data() {
    return {
      grid: null
      definitions: []
    }
  },
  mounted() {
    this.grid = new Muuri('.grid', {
      dragEnabled: true
    })
  },
  methods: {
    showScreen() {
      this.definitions.push("Screen Definition")
      this.$nextTick(function() {
        this.grid.add(this.$refs.gridItem[this.$refs.gridItem.length - 1])
      })
    }
  }
}

CosmosScreen 组件的详细信息在这里并不重要，但它需要一个字符串并动态创建 Vuetify 小部件的屏幕。

【讨论】：

我们无法从您最初的问题中猜出您正在使用 Muuri 和 CosmosScreen。现在情况更清楚了。