Vue的JS RC-1通過道具不工作

在release notes for Vue 1.0.0-rc.1傳遞數據，我們被告知Vue的JS RC-1通過道具不工作

「的繼承選項已被棄用。送花兒給人通過道具組件的數據傳遞給孩子。」

然而，組件API部分說

「$數據不再被用作道具。」

我一直在試圖將數據傳遞給我的根Vue實例的子組件，並且沒有任何運氣。

在0.12版本。*，如果你想父母實例的數據，方法等/需要訪問，您將只需添加...

inherit: true

...的子組件。

現在，在嘗試通過道具訪問父數據時，我繼續撞到一堵磚牆。下面是一個簡化的例子：

app.js：

new Vue({ 

    el: '#app', 

    data: { 
     authorized: false, 
     currentView: 'welcome-view' 
    }, 

    components: { 
     'welcome-view': require('./views/welcome') 
    } 
});

視圖/ welcome.js：

module.exports = { 

    props: ['authorized'], 

    template: require('./welcome.template.html') 
};

視圖/ welcome.template.html：

<div v-if="authorized"><p>You Are Logged In</p></div> 
<div v-else>Please Log In</div>

主查看文件（app.blade.php）

... 
    <body id="app"> 
     <component :is="currentView"></component> 
    </body> 
...

「授權」道具根本不被識別。它在組件之外工作（在「應用程序」ID內）就好了，但不在模板內。

目前，我可以通過使用$ root來滿足我需要的數據。例如：

<div v-if="$root.authorized"><p>You Are Logged In</p></div>

但是，我的理解是，這是「壞形式」周圍的一切，as the docs say：

雖然可以訪問任何實例的父鏈，你應避免直接依賴在子組件中的父數據和優先使用道具明確地傳遞數據。

所以，我需要知道的是... 如何我可以明確地使用道具？我清楚地看到它是錯誤的，因爲如果我只是將它們列在'props：[]'數組中，它們對我的子組件不可用。我在這裏錯過了什麼？

在一天結束時，重構我當前的代碼以取代'inherit：true'並仍然可以訪問根實例數據和函數的最佳方式（標準和實踐）是什麼？任何關於此的幫助/建議都是非常受歡迎的。提前致謝。

來源

2015-10-20 DonnaJo

請參閱@ StephenHallgren在此頁上的答案正確的方式來訪問道具s在HTML中。

至於它的其餘部分，（如何正確重構代碼來代替「繼承：真正的」，我包括在the official Vue forum這裏the answer I received from Evan Y.，如果任何人在未來過這個運行

他的答案。以上提出的問題是：

如果你確信在結構，你可以使用 $ root.authorized

另外，不要把國家授權的根在所有。有用於用戶狀態的專用模塊，可以在任何組件中導入。見 http://rc.vuejs.org/guide/application.html#State_Management

我的外賣從這個是 - 那裏是不會改變混凝土，全局變量，以及應用程序的結構是合理的，這是正常使用$根（或$父母視情況而定），以及 - 元素的狀態有時會發生變化（例如用戶是否被授權/登錄），關鍵是使用狀態管理模塊。同時，當傳遞父與子之間的道具時，必須在prop數組中聲明道具，然後將它們綁定到HTML中的組件。

例如...

app.js：

new Vue({ 

    el: '#app', 

    data: { 
     authorized: false, 
     currentView: 'welcome-view' 
    }, 

    components: { 
     'welcome-view': require('./views/welcome') 
    } 
});

視圖/ welcome.js：

module.exports = { 
    props: ['authorized'], 
    template: require('./welcome.template.html') 
}

welcome.template.html：

<div v-if="authorized"><p>You Are Logged In</p></div> 
<div v-else>Please Log In</div>

主HTML

<body id="app"> 
    <component :is="currentView" v-bind:authorized="authorized"></component> 
</body>

（或簡寫）

<body id="app"> 
    <component :is="currentView" :authorized="authorized"></component> 
</body>

來源

2015-10-24 17:03:18 DonnaJo

構建它的好方法 – vivoconunxino

我有同樣的問題，並沒有意識到，你還必須將值綁定到組件道具這樣的：

v-bind:authorized="authorized"

或簡寫

:authorized="authorized"

下面是一個例子的東西，我一直在努力，說明了解決方案：http://jsfiddle.net/yyx990803/2uqmj2jj/6/

來源

2015-10-23 16:01:31

謝謝，@StephenHallgren。就讓道具在HTML組件中工作而言，這是正確的。所以，加上一個。在重構當前代碼以替換'inherit：true'方面，我通過官方vue.js論壇在Evan Y.上添加了一個額外的答案。謝謝你的幫助。 – DonnaJo

Vue的JS RC-1通過道具不工作

回答

相關問題