vue 2 global compoenent在另一个内部调用了赢得的渲染

Question

我正在为我的Laravel 5.4项目添加tinymce。我把它变成了一个全球性的组成部分。这很好用。它应该是什么，一切都很棒。现在，当跟随Laracasts最新＆＃34;与TDD建立一个论坛＆＃34;系列..我想我可以将该组件添加到回复组件中并在那里使用它！是的..没有。我是一个vue nub，所以我确定我错过了一些明显的东西。有人可以帮忙吗？我甚至决定把全球称为儿童组成部分......也没有欢乐。

Chrome上的Vue调试工具说它在那里......但是编辑器不会渲染。所以我有点困惑。我尝试过将<slot>添加到各个地方，但没有做出任何改动。任何帮助将不胜感激！

全部谢谢！

以下代码 -

app.js：

Vue.component('flash', require('./components/Flash.vue'));
Vue.component('reply', require('./components/Reply.vue'));
Vue.component('tinymce-editor',require('./components/Tinymce.vue'));

const app = new Vue({
    el: '#app',
});

Tinymce.vue：

<template>
    <textarea name="body" class="form-control" id="tinymce" v-text="body" rows="5"></textarea>
</template>

<script>
    export default {
        name: 'tinymce-editor',
        props: {
            body: {
                default: 'Something to say, have you?'
            }
        },

        mounted: function() {
            const self = this;
            tinymce.init({
                menubar: false,
                path_absolute: "/",
                selector: "#tinymce",
                entity_encoding: "raw",
                toolbar_items_size: "small",
                style_formats: [
                    {"title": "Bold", "icon": "bold", "format": "bold"},
                    {"title": "Italic", "icon": "italic", "format": "italic"},
                    {"title": "Underline", "icon": "underline", "format": "underline"},
                    {"title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough"},
                    {"title": "Superscript", "icon": "superscript", "format": "superscript"},
                    {"title": "Subscript", "icon": "subscript", "format": "subscript"},
                    {"title": "Code", "icon": "code", "format": "code"}
                ],
                plugins: 'advlist anchor autolink autoresize code colorpicker hr image link lists preview searchreplace spellchecker textcolor wordcount',
                block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;",
                toolbar1: "undo redo | formatselect | bullist numlist | link unlink | uploadimg image",
                toolbar2: "styleselect fontsizeselect | forecolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat",
                init_instance_callback: function(editor) {

                    // init tinymce
                    editor.on('init', function () {
                        tinymce.activeEditor.setContent(self.value);
                    });
                }
            });
        },
        update: function(newVal, oldVal) {
            // set val and trigger event
            $(this.el).val(newVal).trigger('keyup');
        }
    }
</script>

Reply.vue：

<script>
    import Favorite from './Favorite.vue';
    import Tinymce from './Tinymce.vue';
    export default {
        name: 'Reply',
        props: ['attributes'],

        components: {
            'favorite': Favorite,
            'tinymce-editor': Tinymce
        },

        data() {
            return {
                editing: false,
                body: this.attributes.body
            };
        },

        methods: {
            update() {
                axios.patch('/replies/' + this.attributes.id, {
                    body: this.body
                });

                this.editing = false;

                flash('Updated!');
            },

            destroy() {
                axios.delete('/replies/' + this.attributes.id);

                $(this.$el).fadeOut(300, () => {
                    flash('Your reply has been deleted.');
                });
            }
        }
    }
</script>

reply.blade.php：

<reply :attributes="{{ $reply }}" inline-template v-cloak>
    <div id="reply-{{$reply->id}}" class="panel panel-default">
        <div class="panel-heading">
            <div class="level">
                <h5 class="flex">
                    <a href="{{ route('profile',$reply->owner->name) }}">
                        {{ $reply->owner->name }}
                    </a> said {{ $reply->created_at->diffForHumans() }}...
                </h5>

                <favorite :reply="{{$reply}}"></favorite>
            </div>
        </div>
        <div class="panel-body">
            <div v-if="editing">
                <div class="form-group">
                    <tinymce-editor body="{{ $reply->body }}"></tinymce-editor>
                </div>
                <button class="btn btn-xs btn-primary" @click="update">Update</button>
                <button class="btn btn-xs btn-link" @click="editing = false">Cancel</button>
            </div>

            <div v-else v-html="body"></div>
        </div>
        @can('update', $reply)
            <div class="panel-footer level">
                <button class="btn btn-xs btn-success mr-1" @click="editing = true">Edit</button>
                <button class="btn btn-xs btn-danger mr-1" @click="destroy">Delete</button>
            </div>
        @endcan
    </div>
</reply>