正在解析的道具未定义？

Question

有这个非常简单的 vue 组件，我试图在其中接受搜索字符串作为 prop

Vue.component('search-person', {
        props: ['searchStr'],
        created(){
            console.log(this)
        },
        template:  `<div class="container">
                        <form class="search-person-form">
                            <input type="text" class="search-person-input" placeholder="Search person" v-model="searchStr">
                            <div v-if="!searchStr.length">
                                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" class="search-person-icon">
                                <title>Search</title>
                                    <path d="M32 31.060l-12.233-12.24c1.777-1.992 2.863-4.634 2.863-7.53 0-6.259-5.074-11.333-11.333-11.333s-11.333 5.074-11.333 11.333c0 6.259 5.074 11.333 11.333 11.333 2.896 0 5.538-1.086 7.541-2.873l-0.011 0.010 12.233 12.24zM1.293 11.333c0-5.523 4.477-10 10-10s10 4.477 10 10c0 5.509-4.454 9.977-9.958 10h-0.002c-0 0-0 0-0 0-5.531 0-10.017-4.472-10.040-9.998v-0.002z"/>
                                </svg>
                            </div>
                            <div v-else >
                                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" class="search-person-icon pointer">
                                    <title>cross</title>
                                    <path d="M26 6.96l-0.96-0.96-9.040 9.040-9.040-9.040-0.96 0.96 9.040 9.040-9.040 9.040 0.96 0.96 9.040-9.040 9.040 9.040 0.96-0.96-9.040-9.040 9.040-9.040z"/>
                                </svg>
                            </div>
                        </form>
                    </div>`
    })

然后我尝试使用该组件并将作为数据一部分的搜索字符串解析为 prop

<search-person :searchStr="personSearchStr"/>

personSearchStr 是嵌套 search-person 组件的数据对象的一部分，但在我的 search-person 组件中，searchStr 属性未定义

Answer 1

根据我的评论，我创建了一个带有搜索输入组件及其父容器的示例场景。

搜索输入（子项）的初始值来自父项中的道具集。搜索输入监视道具，因此当父值更改时（在我的示例中通过父项中的输入），子项更新其本地副本。这发生在用户键入时（父级没有提交表单）。

当更改搜索输入（子）值并提交子表单时，将发出一个事件以发送子值以更新父表单。

Parent.vue

<template>
  <div class="parent">
    <h4>Parent Component</h4>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="prop-value">Enter new prop value</label>
          <input type="text" class="form-control" id="prop-value" v-model="parentSearch">
        </div>
        <hr>
      </div>
    </div>
    <search-input :searchFromParent="parentSearch" @update-search-event="updateSearch" />
  </div>
</template>

<script>
  import SearchInput from './SearchInput.vue'

  export default {
    components: {
      SearchInput
    },
    data() {
      return {
        parentSearch: 'Search value from parent prop'
      }
    },
    methods: {
      updateSearch(searchFromChild) {
        this.parentSearch = searchFromChild;
      }
    }
  }
</script>

SearchInput.vue

<template>
  <div class="search-input">
    <h5>Search Input Component (child)</h5>
    <div class="row">
      <div class="col-md-6">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <input type="text" class="form-control" id="search-input" v-model="localSearch">
          </div>
          <button type="submit" class="btn btn-secondary">Submit search value to parent</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      searchFromParent: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        localSearch: this.searchFromParent
      }
    },
    watch: {
      searchFromParent(newValue) {
        this.localSearch = newValue;
      }
    },
    methods: {
      submitForm() {
        this.$emit('update-search-event', this.localSearch)
      }
    }
  }
</script>

正在解析的道具未定义？

Props being parsed undefined?

vue.js

vue-component

vuejs2