Vue 2更改父组件

时间:2017-04-17 21:52:26

标签: vue.js vuejs2 vue-component

所以,我创建了这个搜索组件,因为我会多次使用它。

我的搜索组件(子组件)如下所示:

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

期待有人的帮助:)

1 个答案:

答案 0 :(得分:2)

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

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

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