將雙向綁定道具傳遞給插槽

對於Vue，我有些新奇，並且在將formData傳遞給我的各個子節點時遇到特別困難。理想情況下，每個子節點只是更新父對象，允許我稍後作爲整體提交表單數據。將雙向綁定道具傳遞給插槽

我設置一個的jsfiddle來說明：https://jsfiddle.net/3nm1mrLo/

我現在的想法是，我應該v-bind:field="formData.name"而是拋出一個錯誤。好像formData不存在於基於插槽的HTML中。

任何指針都會被感激地收到。謝謝！

來源

2016-11-07 Wildhoney

正如你所說的，你需要使用v-bind:field="formData.name"或:field="formData.name"。

它不工作，因爲您已經在您的html中直接定義了主應用程序模板，並使用「內容分發」來包含<example-form>和<example-input>。

如文檔中所定義的，如果您熟悉Angular 1.x，則此內容分發（或「transclusion」）可以正常工作，但範圍屬於主應用程序（根實例，因爲該模板屬於它）。

價：https://vuejs.org/v2/guide/components.html#Compilation-Scope

引用：

拇指的用於組分範圍一個簡單的規則是：

在父模板一切都在父範圍編制;子模板中的所有內容都在子範圍內編譯。

如果你很好奇，試着改變你的主要應用程序（例如根）如下：

new Vue({ 
    el: '*[my-app]', 
    data: function() { 
     return { 
      formData: { name: 'abc', location: 'xyz'} 
     }; 
    } 
});

現在你會看到，FORMDATA不undefined了。

但還有一個更合適的方法是包括<example-input>作爲example-form組件的模板的一部分如下：

Vue.component('example-form', { 
    template: ` 
     <div class="my-example-form"> 
      <form><pre>{{formData}}</pre><slot></slot></form> 
      <example-input :field="formData.name"></example-input> 
      <example-input :field="formData.location"></example-input> 
     </div> 
    `, 
    data: function() { 
     return { 
      formData: { name: '', location: ''} 
     }; 
    } 
});

現在它將綁定到右側formData如你所願。

但是，這仍然不適合你，因爲props只是一個單向綁定。子組件（example-input）將獲得價值，但不會將數據變回父組件（example-form）

兒童將數據傳回父，正確的方法是使用$emit在這個問題上的解釋：Updating parent data via child component?

如果你想有一個<example-input>成分表單元素的工作，這裏是一個相關的答案，就像你所期望的：https://stackoverflow.com/a/40337942/654825 - 是否有正常工作的jsfiddle也。

來源

2016-11-08 09:12:41 Mani

謝謝！我的問題是由於對根組件的誤解。我錯誤地認爲第一個組件'example-form'是根，事實上它就是你初始化Vue的節點。現在這一切都非常有意義。 – Wildhoney

將雙向綁定道具傳遞給插槽

回答

相關問題