当我关闭`v-dialog`时如何销毁foo组件？

Question

我有 vuetify 应用程序，单击后打开一个对话框。在对话框内我有Foo组件。

当我关闭对话框时，组件destroy上的事件Foo不会触发。

如何destory在Foo组件中触发？我可以通过 vuetify 方式做到这一点吗？

const Foo = {
  template: `
    <div>im fooo!!! <v-text-field :value="bar"></v-text-field></div>
  `,
  data () {
    return {
      bar: '',
    }
  },
  mounted: function() {
    console.log('mounted')
  },
  destroyed() {
    console.log('destroyed');
  }
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  components: {
    Foo  
  },
  methods: {
    open: function() {
      this.dialog = true;
    }
  },
  data () {
    return {
      dialog: false,
    }
  },
})

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.2.8/dist/vuetify.min.css">

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.8/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-dialog
        v-model="dialog"
        width="500"
      >
        <Foo />
      </v-dialog>
      
      <v-btn @click="open" color="red lighten-2" dark>
        Click Me
      </v-btn>
    </div>
  </v-app>
</div>

Answer 1

只需为组件添加 v-if...

const Foo = {
  template: `
    <div>im fooo!!! <v-text-field :value="bar"></v-text-field></div>
  `,
  data () {
    return {
      bar: '',
    }
  },
  mounted: function() {
    console.log('mounted')
  },
  destroyed() {
    console.log('destroyed');
  }
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  components: {
    Foo  
  },
  methods: {
    open: function() {
      this.dialog = true;
    }
  },
  data () {
    return {
      dialog: false,
    }
  },
})

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.2.8/dist/vuetify.min.css">

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.8/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-dialog
        v-model="dialog"
        width="500"
      >
        <Foo v-if="dialog" />
      </v-dialog>
      
      <v-btn @click="open" color="red lighten-2" dark>
        Click Me
      </v-btn>
    </div>
  </v-app>
</div>