如何在Vuetify中显示Snackbars？

Question

目前，我的Snackbar单击按钮后未显示。我想将Snackbar组件函数传递给我的按钮，该按钮位于add.vue中。有什么方法可以传递组件函数吗？

snackbar.vue在组件文件夹

<template>
  <div class="text-center ma-2">

    <v-snackbar v-model="snackbar" :timeout="timeout" top color="primary">
      {{ 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: 'My timeout is set to 2000.',
      timeout: 2000,
    })
}
</script>

中

<template class="id">
  <base-form title="Add Medical Activities">
      <template v-slot:actions>

            <SnackBar :snackbar="true"/>
            <v-btn
              dark
              @click="snackbar = true"
            >test</v-btn>
            

        
      </template>
       
      <form-input v-model="inputs" :select-multiple="false"></form-input>

  </base-form>
  
</template>

<script>
import SnackBar from '~/components/SnackBar.vue'

export default {
  components: { BaseForm, FormInput, SnackBar },  

Answer 1

您只需要在V模型上传递

<v-snackbar v-model="snackbar">
  hai
</v-snackbar>

<v-btn @click='snackbar = true'> 

任何使更改snackbar true的操作传递，Snackbar将像您期望的那样打开它

Answer 2

尝试一下：

add.v

    <template>
    <div>
        <Snackbar :key="snakKey" v-if="showSnackbar" @toggleSnackbar="showSnackbar = false" />
        <v-btn color="primary" @click="snackbarHandler">
            Show Snackbar
        </v-btn>
    </div>
</template>
<script>
    export default {
        name: "Add",
        data: () => ({
            showSnackbar: false,
            snakKey: 0,
        }),
        methods:{
            snackbarHandler(){
                this.snakKey++;
                this.showSnackbar = true;
            }
        }
    }
    </script>

snackbar.vue

<template>
  <div class="text-center ma-2">
    <v-snackbar v-model="snackbar" :timeout="timeout" top color="primary">
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="pink" text v-bind="attrs" @click="$emit('toggleSnackbar')" >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
  export default {
    data: () => ({
      snackbar: true,
      text: 'My timeout is set to 2000.',
      timeout: 3000,
    })
}
</script>

我希望这对您有帮助。