我是 VueJS 的新手。
我用 jquery 写了一个警告框。现在我试图在 VueJS 中提供它。
这是我所做的:
1- 创建了一个名为 NovinAlert.vue 的组件,包括:
<template>
<div id="novin-alert-container">
<div v-for="message in messages" class="alert novin-alert" :class="message.class">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
{{ message.body }}
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
messages: [],
}
},
methods: {
novinAlert: function (message) {
let app = this;
message.type = typeof message.type !== 'undefined' ? message.type : 'info';
message.class = 'alert' + message.type;
let index = app.messages.push(message) - 1;
if (typeof message.duration !== 'undefined') {
window.setTimeout(function () {
app.messages.splice(index, 1);
}, message.duration * 1000);
}
}
}
}
</script>
2- 我的示例组件是 Dashboard.vue
<template>
...
</template>
<script>
export default {
mounted() {
novinAlert('test');
}
}
</script>
3-我的主要 布局 是:
<body>
<div id="app">
<novin-alert></novin-alert>
<router-view></router-view>
</div>
</body>
4- 这是我的 app.js :
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
window.Vue.use(VueRouter);
import Dashboard from './components/Dashboard.vue';
const routes = [
{path: '/', component: Dashboard, name: 'dashboard'},
];
import NovinAlert from './components/utils/NovinAlert.vue';
Vue.component('novin-alert', NovinAlert);
const router = new VueRouter({ routes: routes });
const app = new Vue({
router,
el: '#app'
});
当我运行仪表板页面时,它不知道 novinAlert
函数。
我做错了什么?我想做的事情的最佳实践是什么?
任何帮助表示赞赏。
原文由 Ali Farhoudi 发布,翻译遵循 CC BY-SA 4.0 许可协议
这就是我最终所做的:
我在我的
app.js
中创建了一个 Vue 实例:我使用此事件但出于多种目的。每当我需要时,我都会触发(发出)一个事件,并且侦听器会执行所需的操作。
对于警报框,我发出这样的事件:
然后我的警报组件反应如下: