Vue 2親コンポーネントの検索プレースホルダと検索IDを変更する

Question

私はこの検索コンポーネントをいくつか使用するので作成しました。

マイサーチコンポーネント（子コンポーネント）のようになります。

<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> 

と、私は以下の例は、私の作品...しかし、私はしたい私の親コンポーネント（カテゴリーと検索ページ） にそれを含めます何らかの形でこのコンポーネントの返されたデータからデータを取得することができ、何とかバインドすることができます。誰かからの助けを楽しみ:)

Answer 1

あなたがそれらを結合することによって値を渡す必要が

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

：

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

だから、のような返されたデータから、任意の形式通過データが存在します。以下の答えを確認してください。

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

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