我如何在 Vuetify 中使用事件调用组件？

Question

目前，我必须在我的网站中添加一个 SnackBar 组件。预期的输出是当用户单击提交按钮时将显示 snackbar。如何将我的 snackbar 组件传递到位于 Add.vue 文件内的按钮？这是因为我想重用我的 snackbar 组件，因为有多个提交表单。

SnackBar.vue 内部组件文件

<template>
  <div class="text-center ma-2">
    <v-snackbar
      v-model="snackbar"
    >
      {{ text }}

      <template v-slot:action="{ attrs }">
        <v-btn
          color="pink"
          text
          v-bind="attrs"
          @click="snackbar = false"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
  export default {
    data: () => ({
      snackbar: false,
      text: `Hello, I'm a snackbar`,
    }),
  }
</script>

Add.vue

<template>
  <base-form title="Add">
      <template v-slot:actions>
            <v-btn
              color="secondary"
              type="submit"
            >
              <div>Save</div>
            </v-btn>
           
      </template>
 
  </base-form>

</template>

Answer 1

你可以导入你的零食组件并传递 prop:

Vue.component('snack', {
  template: `
    <div class="text-center ma-2">
      <v-snackbar
        v-model="snackbar"
      >
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn
            color="pink"
            text
            v-bind="attrs"
            @click="$emit('closed', false)"
          >
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  `,
  props: {
    snackbar: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    text: `Hello, I'm a snackbar`,
  }),
})
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    show: false,
  }),
  methods: {
    submit(val) {
      this.show = val
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-btn
          color="secondary"
          type="submit"
          @click="submit(true)"
        >
          <div>Save</div>
        </v-btn>
        <snack :snackbar="show" @closed="submit(false)"></snack>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

我如何在 Vuetify 中使用事件调用组件？

How do i call a component using event in Vuetify?

javascript

vue.js

vuejs2

vuetify.js