Question

我是Vue的新手，我想在vuetify中重用小吃栏/警报框到我的每个组件。我通过复制粘贴每个组件的代码来做到这一点，这使其非常混乱且难以维护。

如何为每个View Vue组件重用此功能？

请在下面查看我的示例代码。

Vue组件<模板>

 <v-snackbar
  v-model="snackbar.appear"
  :color="snackbar.color"
  :timeout="snackbar.timeout"
  :left="snackbar.x === 'left'"
  :right="snackbar.x === 'right'"
  :top="snackbar.y === 'top'"
> 
  <v-row>
    <v-icon class="mx-2" size="18" dark>{{ snackbar.icon }}</v-icon>
    {{ snackbar.text }}
  </v-row>
  <v-btn dark text @click="snackbar.appear = false">OKAY</v-btn>
</v-snackbar>

Vue组件<脚本>

snackbar: {
    appear: false,
    icon: '',
    text: '',
    color: 'success',
    timeout: 2500,
    x: 'right',
    y: 'top',
  },

axios 
.post('/api/department-objective', { corporate_objective_id, objective, description })
.then(response => {
  this.snackbar.appear = true
  this.snackbar.text = response.data.text
  this.snackbar.icon = response.data.icon
})
.catch(error => {
  console.log(error)
  this.alert = true
  this.allerror = error.response.data.errors
})

Answer 1

我经常在根应用程序的组件中添加应用程序范围的警报消息，例如Key_iterator组件建立基本布局，并将其可见性绑定到中央std::map<std::string, int> m1{{"n1", 1}, {"n2", 2}, {"n3", 3}}; std::map<std::string, int> m2{{"n2", 3}, {"n4", 2}, {"n1", 9}}; auto key_iterator = [](auto it) { return boost::transform_iterator(it, [](auto& p) { return p.first; }); }; std::vector<std::string> s; std::set_intersection(key_iterator(m1.begin()), key_iterator(m1.end()), key_iterator(m2.begin()), key_iterator(m2.end()), std::back_inserter(s));存储区中App或error属性的存在。

有关详情，请参见this answer

Answer 2

您可以创建一个snackbar 组件，您可以将其导入App.vue 以便它可用于每个组件，然后您可以根据需要使用vuex store 触发该组件。

这是我在学习实现相同内容时使用的一篇文章。 How to create a global snackbar using Nuxt, Vuetify and Vuex.。

如果你不想使用 nuxt ，只要参考这篇文章，你就会明白。

Answer 3

您可以创建一个SnackBarComponent并将其导入其他所有组件

App.vue

<template>
<SnackBarComponenent :stuffProp="yourProps" />
</template>
<script>
import SnackBarComponenent from './components/SnackBarComponent'
export default {
    components:{
        ProfileOverview
     }
}
</script>

Answer 4

这是我使用提供/注入和可组合小吃栏的 Composition API 实现：

https://gist.github.com/wobsoriano/2f3f0480f24298e150be0c13f93bac20

<script lang="ts">
import { defineComponent } from 'vue/composition-api';
import { useSnackbar } from '~/composables';
export default defineComponent({
  setup() {
    const createSnackbar = useSnackbar();
    const showSnackbar = () => {
      createSnackbar('Your snackbar message');
    };
    return {
      showSnackbar
    };
  },
});
</script>

Vue + Vuetify重用小吃栏/警报

4 个答案: