vue.js - 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>

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

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

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

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

期待有人的帮助:)

Answer 1

您必须通过绑定(bind)它们来传递值。检查以下答案。

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

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