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>