Vue 2 상위 구성 요소의 검색 자리 표시자 및 검색 ID 변경

Vue 2 상위 구성 요소의 검색 자리 표시자 및 검색 ID 변경

이 검색 컴포넌트는 여러 번 사용하기 때문에 작성했습니다.

내 검색 구성요소(자 구성요소)는 다음과 같습니다.

<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',
        },
      ],

누군가의 도움을 기대하고 있습니다. :)

값을 바인딩하여 전달해야 합니다.아래 답변을 확인하세요.

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

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

언급URL : https://stackoverflow.com/questions/43460214/vue-2-change-search-placeholder-and-search-id-on-parent-component