Vue 2在父組件上更改搜索佔位符和搜索標識

因此，我創建了此搜索組件，因爲我將多次使用它。Vue 2在父組件上更改搜索佔位符和搜索標識

我的搜索組件（子組件）看起來像：

<template> 
    <div class="input-group main-search"> 
    <input class="input-group-field" type="text" value="" :placeholder="placeholder" :id="searchId"> 
    <div class="input-group-button"> 
     <input type="submit" class="button" value="Search"> 
    </div> 
    </div> 
</template> 

<script> 

export default { 
    props: ['placeholder', 'searchId'], 
    name: 'search', 
    data() { 
    return { 
    }; 
    }, 
}; 
</script>

和我把它變成我的父組件（搜索頁面與類別）下面的例子對我的作品...但我想打它以某種方式從該組件中返回的數據獲取數據並以某種方式綁定到該組件中。

<template> 
    <search placeholder="placeholder text" id="id number"></search> 
    <p>some text here </p> 
</template>

那麼，有沒有從像返回的數據的任何形式傳遞數據：

data() { 
    return { 
     searchProps: [ 
     { 
      placeholder: 'Watafaka', 
      searchId: '2', 
     }, 
     ],

期待着幫助從別人:)

來源

2017-04-17 Marketingexpert

你的問題到底是什麼？從哪裏到哪裏你想傳遞數據？ – Pradeepb

我有一個子組件，我希望能夠從父組件中更改子組件的佔位符值 – Marketingexpert

我想你已經回答了你自己的問題了嗎？你已經有一個名爲'placeholder'的道具，父組件可以傳遞任何想要設置正確佔位符的值。 – Maurice

你必須結合他們通過數值。檢查下面的答案。

<template> 
    <search :placeholder="placeholderValue" :searchId="searchId"></search> 
    <p>some text here </p> 
</template> 

data() { 
    return { 
     placeholderValue: 'Watafaka', 
     searchId: '2' 
    } 
}

來源

2017-04-18 05:03:52 Pradeepb

thnx爲你的答案，但是當我有一個返回比數組，它不起作用，就像我在我的問題上面的例子。我無法訪問它通過searchProps.placeholder有任何方式> ?? – Marketingexpert

是的，你可以。像這樣傳遞它：：placeholder =「searchProps [0] .placeholder」'。你使用它作爲'searchProps.placeholder'這是錯誤的。 – Pradeepb

Vue 2在父組件上更改搜索佔位符和搜索標識

回答

相關問題