2017-08-17 77 views
2

我在網上找不到任何文檔或例子,但是將多個道具傳遞給組件的正確方法是?vue2:是否可以將多個道具傳遞給組件?

這裏是我曾嘗試:

在HTML

<component:prop1="data1" :prop2="data2"></component> 

在component.js

props: ['prop1','prop2'], 

但obiusly不工作......

+1

你能分享更多的代碼嗎?也許根本原因是另一個問題,因爲你在這裏顯示的代碼應該工作。 – kevguy

+0

@ kevlai22謝謝!足以知道這是可能的,這是一個正確的方法 –

+0

這是我爲教程製作的一個例子,希望它能提供幫助。 https://codepen.io/kevlai22/pen/LLJZrp – kevguy

回答

0

你可以通過這是一個多元化的道具。 在父組件:

<template> 
    <div id="app"> 
    <child-component :propA=propa :propB=propb></child-component2> 
    </div> 
</template> 

<script> 
import ChildComponent from './components/comp2' 
export default { 
    name: 'app', 
    components: { 
    ChildComponent 
    }, 
    data() { 
    return { 
     propa : 65, 
     propb : 'Nitin' 
    } 
    } 
} 
</script> 

<style></style> 

在子組件:

<template> 
    <div> 
    {{propA}} 
    {{propB}} 
    </div> 
</template> 

<script> 
export default { 
    props: { 
    propA: Number, 
    propB: String 
    } 

} 
</script> 

<style lang="css"> 
</style> 

參考 - https://vuejs.org/v2/guide/components.html#Prop-Validation 在文檔中唯一的地方,有多種道具。

相關問題