Question

所以我是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应该可以正常工作。

如果可以，请帮忙。

Answer 1

您在以下代码段中出错：

  <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>

Laravel + vue - 道具未定义

1 个答案:

被修改