Vue.js：使用预渲染的 html 作为 parent 和 child 组件的模板

Question

我目前正在渲染所有 html server-side 并且我正在尝试让 vue 使用此 html 作为以下两个组件的 $el .据我从 lifecycle diagram 了解到，这应该有效。

有一个 parent Vue 实例（绑定到 #main）并包含一个 child 组件（通过 html 中的 <mod-sidebar> 元素).

现在我收到以下错误消息：

[Vue warn]: v-on:click="gotoSlide" expects a function value, got undefined

并且 v-text 指令也不起作用，即使数据已明确定义。

因此，问题似乎是，parent 实例已经将 child 组件中的所有指令编译为它自己的指令（例如 child 中的 v-text =] 组件已经由 parent 编译，似乎在 child 初始化之前。

有什么方法可以防止这种情况发生，以便自定义 child 标记 <mod-sidebar> 中的指令仅由 child 元素编译？

Vue.component(`mod-sidebar`, {
    ready: function() {
        // initialize slider
    },
    data: function() {
        return {
            name: 'slider',
        };
    },
    methods: {
        gotoSlide: function(event) {
            return false;
        },
    },
    replace: false
});

new Vue({
    el: '#main'
});

<main class="skel-main" id="main" role="main"> <!-- parent -->
    <mod-sidebar class="sidebar"> <!-- child -->
        <div class="sidebar--slider">
            <div class="sidebar--slider-item">
                <a class="sidebar--slider-link" href="#" @click="gotoSlide">
                    <span class="sidebar--slider-text" v-text="name"></span>
                </a>
            </div>
        </div>
    </mod-sidebar>
</main>

http://jsfiddle.net/gtmmeak9/27/

Answer 1

你不见了inline-template

<mod-sidebar class="sidebar" inline-template>

Vue.js：使用预渲染的 html 作为 parent 和 child 组件的模板

Vue.js: Using prerendered html as template for parent and child components

javascript

vue.js