所以我是vue的新手,但要加快速度。但是,我无法使道具工作 - 它在我的子组件中始终未定义。
下面的想法是创建一个应用程序范围的通知模式窗口来显示通知。
这是我的app.js
require('./bootstrap');
import ModalNotification from './components/Modal-Notification.vue';
const app = new Vue({
el: '#app',
data : {
formInputs: {},
formErrors: {},
showModal: false
},
components: {ModalNotification}
});
这是我的Modal-Notification.vue
<template>
<transition name="modal">
<div class="modal-mask" @click="$emit('close')">
<div class="modal-wrapper">
<div class="modal-container" @click.stop>
<!-- <div class="modal-header">
<slot name="header">
NOTIFICATION
</slot>
</div> -->
<div class="modal-body">
<slot name="body">
Bla bla
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="modal-default-button btn btn-success" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'ModalNotification',
data: function() {
return {
};
},
props: ['showModal'],
mounted: function() {
console.log(this);
document.addEventListener("keydown", (e) => {
console.log(this.showModal);
if (this.showModal && e.keyCode == 27) {
this.$emit('close');
}
});
},
methods: {
}
}
</script>
app.blade.php的相关部分
<div class="container-fluid" id="app">
<button @click="showModal = true" class="btn btn-default">MODAL</button>
<modal-notification v-if="showModal" @close="showModal = false" :showModal="false">
<p slot="body" id="notification-message">hehe</p>
</modal-notification>
<div id="wrapper">
@yield('sidebar')
@yield('content')
</div>
</div>
我已经尝试了所有的东西,除了切换到Browserify,babel和其他东西,但我认为不应该需要它 - webpack应该可以正常工作。
如果可以,请帮忙。
答案 0 :(得分:0)
您在以下代码段中出错:
<modal-notification v-if="showModal" @close="showModal = false" :showModal="false">
<p slot="body" id="notification-message">hehe</p>
</modal-notification>
:showModal="false"
基本上是v-bind:showModal="false"
的快捷方式,它试图在附加HTML属性(documentation)的值中搜索vue实例变量。当您传递的false
不是vue数据变量时,它只是在null
道具中传递showModal
。
如果您只想传递false
,请将代码更改为以下内容:
<modal-notification v-if="showModal" @close="showModal = false" showModal="false">
<p slot="body" id="notification-message">hehe</p>
</modal-notification>
我认为这是camelCase-vs-kebab-case的神奇之处:
HTML属性不区分大小写,因此在使用非字符串模板时,camelCased prop名称需要使用它们的kebab-case(连字符分隔)等价物:
您需要传递:show-modal="false"
<modal-notification v-if="showModal" @close="showModal = false" show-modal="false">
<p slot="body" id="notification-message">hehe</p>
</modal-notification>