javascript - 使用 vueify 和模式模板的主 Modal.vue 文件时，Vueify 模式无法正常工作

Question

我一直在尝试遵循这个http://adamwathan.me/2016/01/04/composing-reusable-modal-dialogs-with-vuejs/并让它与 Vueify 一起工作，前几天我成功做到了，然后改用了另一种方法并决定回来。现在我遇到一个问题，我的模式只是在页面本身上呈现，而不是作为模式呈现。我正在使用 Laravel 5.2 和从我的 index.blade.php 扩展文件中的 CDN 拉入的最新 Vue。

Modal.vue

<template>
    <div class="modal-mask" @click="close" v-show="show" transition="modal">
        <div class="modal-container" @click.stop>
            <slot></slot>
        </div>
    </div>
</template>

<script lang="babel">

    export default {
        props: ['show', 'onClose'],
        methods: {
            close: function () {
                this.onClose();
            }
        },
        ready: function () {
            document.addEventListener("keydown", (e) => {
                if (this.show && e.keyCode == 27) {
                    this.onClose();
                }
            })
        }
    }
</script>

NewSaleModal.vue

<template>
    <modal :show.sync="show" :on-close="close">
        <div class="modal-header">
            <h3>New Post</h3>
        </div>

        <div class="modal-body">
            <label class="form-label">
                Title
                <input v-model="title" class="form-control">
            </label>
            <label class="form-label">
                Body
                <textarea v-model="body" rows="5" class="form-control"></textarea>
            </label>
        </div>

        <div class="modal-footer text-right">
            <button class="modal-default-button" @click="savePost()">
                Save
            </button>
        </div>
    </modal>
</template>

<script lang="babel">
    export default {
        props: ['show'],
            data: function () {
                return {
                    title: '',
                    body: ''
                }
            },
        methods: {
            close: function () {
                this.show = false;
                this.title = '';
                this.body = '';
            }
        }
    }
</script>

App.js

import Vue from 'vue';
import VueResource from 'vue-resource';
import Modal from './v-components/Modal.vue';
import NewSaleModal from './v-components/NewSaleModal.vue';

Vue.use(VueResource);

new Vue({
    el: '#app',
    components: {Modal, NewSaleModal},
    data: {
        showModal: false,
    }
});

来自index.blade.php的相关部分

<div class="module" id="app">
        <new-sale-modal :show.sync="showModal"></new-sale-modal>
    <button id="show-modal" @click="showModal = true">New Post</button>
</div>

最终只是将 NewSaleModal 渲染到页面，如下所示 /image/pGhw6.png

当我检查<NewSaleModal>时，我的控制台绝对没有错误。在 VueDevTools 中，“show”属性设置为 false，而在 <Root> 中showModal 变量也设置为 false。

这也是我的 gulpfile 和 package.json。

gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.less('main.less')
       .browserify('app.js')
       .version([
            './public/css/main.css',
            './public/js/app.js'
       ])
       .browserSync({proxy: 'site.dev'});
});

package.json

{
  "name": "ProjectName",
  "version": "1.0.0",
  "devDependencies": {
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "laravel-elixir-vueify": "^1.0.3",
    "notify-send": "^0.1.2",
    "vue-resource": "^0.7.0",
    "vueify": "^8.3.9"
  },
  "dependencies": {
    "laravel-elixir": "^6.0.0-1",
    "laravel-elixir-browserify": "^0.8.1"
  }
}

任何关于为什么它不能正确地使我的 NewSaleModal.vue 成为模态的帮助都会很棒。

Answer 1

经过一番查找后，我找到了答案。

我做错的是我没有在 NewSaleModal.vue 文件中包含 Modal 组件。所以我添加了

import Modal from './Modal.vue'

之前导出默认，之后添加

components: {
        Modal
},

脚本本身解决了我的问题。