Question

<script>
export default {
  data () {
    return {
      my_alert: false,
      text: '',
      color: 'success'
    }
  },
  methods: {
    openAlt (text, color) {
      this.text = text
      this.color = color
      this.my_alert = true
    }
  }
}
</script>

<template>
  <div>
    <v-btn @click="openAlt('This is alert', 'error')">Click me!</v-btn>
      <v-snackbar v-model="my_alert"
            :timeout="2000"
            :color="color"
            top right>
      {{ text }}
      <v-btn icon ripple @click="my_alert = false">
        <v-icon>close</v-icon>
      </v-btn>
    </v-snackbar>
  </div>
</template>

我正在研究Vue.js和Vuetify。我写了一个代码，单击v-btn后显示警报。

如何在此页面之外重用此警报？

我想将该代码模块化，并将其用于我所有页面的警报。

感谢您的回答。

Answer 1

我认为创建一个mixin也可以：

假设您创建如下的alertMixin.js：

{
    "project": {
        "id": 1,
        "title": "a test title",
        "tags": [
            "tag-A",
            "tag-B"
        ],
        "latestProgress": {
            "id": 45,
            "details": "run run run",
            "project_id": 1,
            "created_at": "2018-07-10 04:14:59 UTC",
            "updated_at": "2018-07-10 04:14:59 UTC"
        }
    }
}

像这样在任何地方使用它：

const alertMixin = {
  data () {
    return {
      myAlert: false,
      text: '',
      color: 'success',
    }
  },
  methods: {
    openAlt (text, color) {
      this.text = text;
      this.color = color;
      this.myAlert = true;
    }
  }
};

export default alertMixin;

Answer 2

欢迎来到vue的美好世界。

您可以轻松地将警报制作为组件并将其导入到任何需要的地方。

对于要使用警报代码的任何文件，只需导入警报组件并像使用其他任何HTML组件一样使用它即可。

import alert from './path/to/component

<template>
    <appAlert></appAlert>
</template>

<script>
 components:{
     appAlert: alert
}
</script>

您可以使用组件做更多的事情，有关Vue components的信息

希望对您有帮助。

Answer 3

这是我的新代码。

App.vue

<template>
  <v-app>
    <v-content>
      <router-view/>
    </v-content>
    <alt></alt>
  </v-app>
</template>

<script>
export default {
  name: 'App'
}
</script>

main.js

// ...
import alt from './components/alt'

Vue.prototype.$EventBus = new Vue()
Vue.config.productionTip = false

Vue.component('alt', alt)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

alt.vue

<script>
export default {
  data () {
    return {
      my_alert: false,
      text: '',
      color: 'success'
    }
  },
  created () {
    this.$EventBus.$on('show_alt', (str, color) => {
      var text = str
      var clr = color

      if (!text) text = '설정되지 않은 문구'
      if (!clr) clr = 'error'

      this.text = text
      this.color = clr
      this.my_alert = true
    })
  }
}
</script>

<template>
  <div>
      <v-snackbar v-model="my_alert"
            :timeout="2000"
            :color="color"
            top right>
      {{ text }}
      <v-btn icon ripple @click="my_alert = false">
        <v-icon>close</v-icon>
      </v-btn>
    </v-snackbar>
  </div>
</template>

最后，altTest.vue

<template>
  <v-btn @click="openAlt('This is alert', 'error')">Click Me!</v-btn>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    openAlt (str, color) {
      return this.$EventBus.$emit('show_alt', str, color)
    }
  }
}
</script>

我将alt.vue作为全局导入到main.js中，并且添加了App.vue。

因此，我无需导入即可在altTest.vue中打开警报（但是，它需要一个方法openAlt（））。

但是，我认为这并不简单。

如何重用Vue和Vuetify代码？

3 个答案: