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>

我将它包含在我的父组件中（使用类别搜索页面）下面的示例对我有用......但我想以某种方式能够从该组件中返回的数据中获取数据并以某种方式绑定到其中。

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

那么是否有任何形式从返回的数据中传递数据，例如：

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

期待有人的帮助:)

Answer 1

您必须通过绑定来传递值。检查以下答案。

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

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

Vue 2 更改父组件上的搜索占位符和搜索 ID

Vue 2 Change search placeholder and search id on parent component

vue.js

vue-component

vuejs2