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

Question

我正在渲染所有的html服务器端，我正试图让这个html用作以下两个组件的$el 。 据我所知，从生命周期图中可以看出这一点。

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

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

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

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

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

有没有办法防止这种情况发生，所以自定义子标记<mod-sidebar>中的指令只能由子元素编译？

 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>