2017-04-05 73 views
0

如何將props傳遞給markdown/template語法中的組件?將道具傳遞到模板

我可以做類似React <component :props="myObject">嗎?以及我將如何處理我的組件內?道具是否也必須在我的組件中聲明,或者我可以擁有「未知」道具嗎?

我的直覺,反應的影響,會做:

<template> 
    <div> 
     <component :is="Form" :prop="{title: 'foo', subTitle: 'bar'}"></component> 
    </div> 
</template> 

,並在我的Form.vue文件我就不必申報props,想申報數據:

data(){ 
    return {title: '', subTitle: ''}; 
} 
+0

他們(道具)已到組件內部聲明。 –

+0

另外,如果您使用屬性綁定:prop ='some',您可以在數據屬性中使用它。您的問題是否將道具傳遞給一般組件或將道具傳遞給動態組件?因爲''? –

+0

@AmreshVenugopal我想將道具動態地傳遞給一個'',我使用了一個名爲'Form'的組件(這是一個提交表單),我想將'props'傳遞給它,所以我可以添加輸入,根據「道具」對象選擇按鈕。如果我不清楚,請告訴我,來自React世界,對Vue.js非常好奇! – Rikard

回答

1

由於每文檔:

prop是一個自定義屬性,用於從父組件傳遞信息經濟需求。子組件必須明確聲明它希望接收使用道具選擇道具:

在你的情況,父組件:

<template> 
    <child :title-data="sample_data"></child> 
</template> 

可以在父組件設置「SAMPLE_DATA」數據。

data: function() { 
    return { 
    sample_data: { 
     'title': '', 
     'subtitle': '' 
    } 
    } 
} 

子組件:

<template> 
    <span> {{ titleData.title }} </span> 
    <span> {{ titleData.subtitle }} </span> 
</template> 

<script> 
export default { 
    name: 'child', 
    props: ['titleData'] 
} 
</script> 

是的,你必須聲明組件內的道具。你可以用上面的方式聲明它,或者你可以更清楚地說明道具從而驗證道具。閱讀本關於如何去它:https://vuejs.org/v2/guide/components.html#Prop-Validation

也瞭解烤肉情況VS駝峯道具:https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

瞭解更多關於道具:https://vuejs.org/v2/guide/components.html#Props

+0

謝謝你看我的問題!我只看到':title-data'一次,如果不是我在'child'組件中使用的屬性名稱? becase'title-data'不是一個具有speciall funcionality的保留字嗎? – Rikard

+0

它是在孩子內部宣稱的道具,請參閱道具:['titleData'],看看這個來理解情況的變化:https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab -case – Deepak

+0

基本上,如果你的prop是'titleData'(camelCase),那麼當你在html中使用它作爲屬性時,它必須被用作'標題數據'(kebab-case)。 – Deepak