Vue.js 当根组件中的值发生变化时，子组件中的 props 值不会更新

Question

我已经从我的根组件收到道具。通过我测试的 <template>，当根组件中的值发生变化时，{{firstdata}} 会更新，但 {{topic}} 仍然与它获得的第一个值保持不变。似乎 this.firstdata 只存储一次数据而没有进一步更新。

我执行 return {topic: this.firstdata 因为我需要在我的 java 脚本中使用 topic，因为我不能在 java 中直接调用 {{firstdata}} ]脚本部分。有什么解决方案可以为我更新反应性 topic 吗？

    <template>

        {{firstdata}}
        {{ this.topic }}

    </template>

<script>
   export default {
   props: ["firstdata", "seconddata"],

          data() {
            return {
              topic: this.firstdata
            };
          },
    </script>

这就是我从父级获取更新值的方式（我提到的第一个数据是 breedKey)

        <b-button v-on:click="currentBreed = 0" >  {{ breeds[0].name }}  </b-button>
        <b-button v-on:click="currentBreed = 1" >  {{ breeds[1].name }}  </b-button>

        <ChildCompo v-bind:breedKey="breedKey" v-bind:time="time"> </ChildCompo>

<script>

     data() {
        const vm = this;
        return {
          currentBreed: 0,
          time:[],
          breeds: [
            { name: "" , key: "" }, // Initially empty values
            { name: "" , key: "" }, // Initially empty values
            { name: "" , key: "" }, // Initially empty values
          ]
        }
      },

      async created() {
        try {
          this.promise = axios.get(
            "https://www.mustavi.com/Trends/"
          );
          const res = await this.promise;
          this.topic0 = res.data.data[0].Trends;
          this.topic1 = res.data.data[1].Trends;
          this.topic2 = res.data.data[2].Trends;

          this.breeds[0].name = this.breeds[0].key = this.topic0;
          this.breeds[1].name = this.breeds[1].key = this.topic1;
          this.breeds[2].name = this.breeds[2].key = this.topic2;

          this.time = res.data.data[0].DT;

              } catch (e) {
             console.error(e);
                }  
            },

      computed: {
            breedKey() {
              return this.breeds[this.currentBreed].key;
            }
          },

        </script>

Answer 1

没错，由于data函数只运行一次，所以topic只赋值一次。如果您想持续观察和更新该值，请使用计算：

computed: {
  topic() {
    return this.firstdata;
  }
}

并从数据中删除 topic。

但是没有必要这样做，因为您可以直接在组件中使用 firstdata，就像您设置 topic 时所做的那样。

Answer 2

在computed中使用：

computed: {
  topic() {
    return this.firstdata
  }
}

Answer 3

使用手表属性:

watch: {
firstdata:function(value){
   this.topic = value
}
}

Vue.js 当根组件中的值发生变化时，子组件中的 props 值不会更新

Vue.js props value in the child component is not update when the value in root component is change

javascript

vue.js

vue-component

vuejs2

vue-props