如何使用 Vuetify 组件槽函数答案

【问题标题】：How to use Vuetify Component Slot Function如何使用 Vuetify 组件槽函数
【发布时间】：2021-04-06 03:10:12
【问题描述】：

我想知道标题是什么意思。我正在尝试使用 v-alert 可关闭组件，并希望在用户单击关闭按钮时添加一些功能。阅读文档，在 close 插槽中有一个 toggle 函数，该函数“切换警报的活动状态。在关闭插槽中可用并用作 中的单击操作strong>可解雇。”

https://vuetifyjs.com/en/api/v-alert/#functions

https://vuetifyjs.com/en/api/v-alert/#slots-close

在下面找到我尝试过但没有成功的地方：

<template>
  <div id="app">
    <v-app>
      <v-alert dismissible v-model="message">
        {{ message }}
        <template v-slot:close="{ toggle }">
          <v-btn color="primary" dark @click="myFunction"> Dismiss </v-btn>
        </template>
      </v-alert>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    message: "The message",
  }),
  methods: {
    myFunction() {
      console.log("do something before dismiss");
    },
  },
};
</script>

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

此插槽返回一个名为切换的函数。一种可能的解决方案是将此函数传递给您的自定义函数，随心所欲地执行，然后调用切换函数。

https://codepen.io/vinisalves/pen/poRrjOY?editors=1010

<div id="app">
    <v-app>
      <v-alert dismissible v-model="myAlertModel">
        {{ message }}
        <template v-slot:close="{ toggle }">
          <v-btn  color="primary" dark @click="myFunction(toggle)"> Dismiss </v-btn>
        </template>
      </v-alert>
    </v-app>
  </div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
   data: () => ({
    message: "The message",
     myAlertModel: true,
  }),
  methods: {
    myFunction(dismissFn) {
      console.log("do something before dismiss");
      dismissFn();
      
    },
  
  },
})

另一个问题是，v-model 需要一个布尔值而不是字符串。

【讨论】：