Vuejs2 值更改时子组件中的道具未更新

在我的

App

组件（父级）中，我有：

...
数据（）{
返回{
狗种：“比特犬”
}
},

在子视图中：

<template>
    <div class="bg-primary text-white text-center m-2 p-3 content">
        <h3>Dog: {{ dog }}</h3> 
    </div>
</template>

...
props: ["greeting", "dogBreed"], 
    data() {
        return {
            dog: this.dogBreed, 
        }
    },

狗：{{Dog}}
...
道具：[“问候”，“狗狗”]，
数据（）{
返回{
狗：这个，狗种，
}
},

我确实从子组件内部的父组件中获得了

狗品种

的初始值，但是当我更改输入字段的值时，相同的更改没有反映出来，为什么

父组件中的道具命名不正确，它应该是您在子组件中使用的道具的确切名称 组成部分

...
数据（）{
返回{
狗种：“比特犬”
}
},

您的子组件可以保持不变，但使用计算的而不是数据。同名不会导致任何计算错误 问题和使用计算数据代替数据应该解决动态问题 代码的性质

狗：{{Dog}}
...
道具：[“问候”，“狗狗”]，
计算：{
狗（）{
把这个还给我，狗狗
}
},

---

但是，如果您热衷于使用

dog-bride

，那么在将道具绑定到父组件之前，必须将子组件中的道具重命名为

dog-bride

。

您是说问题在于

v-bind:dog-bride=“dogbride”

应该是

v-bind:dogbride=“dogbride”

？如果是这样，那也没什么区别。

<template>
    <div class="bg-primary text-white text-center m-2 p-3 content">
        <h3>Dog: {{ dog }}</h3> 
    </div>
</template>

...
props: ["greeting", "dogBreed"], 
    data() {
        return {
            dog: this.dogBreed, 
        }
    },

<div class="bg-dark text-white text-center p-3 content">
        <div class="form-group">
            <input class="form-control" v-model="dogBreed" />
        </div>
        <my-child-comp greeting="Hello from parent" v-bind:dogBreed="dogBreed" />
    </div>

...
data() {
        return {
            dogBreed: "Pit Bull"
        }
    },

<template>
    <div class="bg-primary text-white text-center m-2 p-3 content">
        <h3>Dog: {{ dog }}</h3> 
    </div>
</template>

    ...
 props: ["greeting", "dogBreed"], 
 computed: {
      dog(){
        return this.dogBreed
      }
   },