为 Vue 组件中的数据分配一个 prop 值

Question

<template>
    <div class="container p-2">
        <form id="Lookup">
            <div class="row p-2">
                <div class="col-12 input-group ">
                    <input type="text" name="postcode"   :placeholder="initial" v-model="location" class="form-control p-3"><div class="input-group-append"><i class="material-icons input-group-text" @click="$emit('findlocation', location)">location_searching</i></div>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    export default{
        props: ['initial'],
        data: function () {
            return {
              location : this.initial
            }
        }
    }
</script>

上面是我的 Vue 组件，它传递了一个名为 initial 的字符串值 这个值是从下面的模板传递过来的

<practicesearch-component @findlocation="getlocation" :initial=postalTown" />

其中 postalTown 是主 vue 的数据属性

但我没有在 location 中获取 postalTown 的字符串值

function String() { [本机代码] }

Vue 组件中的初始 prop 显示了正确的字符串值，但位置已被分配一个函数 我做错了什么？

Answer 1

当 Vue 初始化您的组件时，data 函数无法访问 View Model this。您可以使用挂载的钩子来分配值

export default {
    props: ['initial'],
    data: () => ({
        location: undefined
    }),
    mounted() {
        this.location = this.initial;
    }
}

注意这样，每当initial在父级中发生变化时，location将不会被更新。

这是一个简单的示例：

Vue.productionTip = false;
Vue.component('child', {
  template: `
  <div class="child">
    Child component:
    <br/>
    location: {{ location }}
    <br/>
    initial: {{ initial }}
  </div>
  `,
  props: { initial: String },
  data: () => ({ location: undefined }),
  mounted () {
    this.location = this.initial;
  }
});


new Vue({
  el: '#app',
  template: `
  <div class="parent">
    Parent Component
    <br/>
    location: {{ location }}
    <child :initial="location" />
  </div>
  `,
  data: () => ({ location: 'US' })
});

.parent {
  background-color: darkgray;
  padding: 1em;
  border: solid 1px black;
  color: white;
}

.child {
  background-color: gray;
  padding: 1em;
  border: solid 1px black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Answer 2

经过大量分析，我发现了导致这种行为的问题。

<practicesearch-component @findlocation="getlocation" :initial=postalTown" />

上面的 postalTown 最初不是在 Vue 实例中设置的，而是在 mount 中，因此组件被传递一个未初始化的字符串对象，而不是 postalTown 的初始化值

我在 postalTown 上添加了 :key 属性，如下所示，这会导致组件使用 postalTown 的初始化值重新渲染 也许这不是最好的选择，但它确实有效

<practicesearch-component @findlocation="getlocation" :key=postalTown :initial=postalTown ></practicesearch-component>