vue.js - 如何在 Vuetify 中显示小吃吧?

目前,单击按钮后我的小吃栏未显示。我想将快餐栏组件功能传递给位于 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>

Add.vue 文件

<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 },

回答1

试试这个:

添加.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>

小吃吧.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>

我希望这可以帮助你。

相似文章