目前，单击按钮后我的小吃栏未显示。我想将快餐栏组件功能传递给位于 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>我希望这可以帮助你。