Vue 打印子组件props的值

Posted 2023-04-17

参考技术A props: 

    htId: String,

  ,

watch: 

    htId: function(newVal,oldVal)

      console.log(newVal)

    

  ,

当根组件中的值更改时，子组件中的 Vue.js props 值不会更新

【中文标题】当根组件中的值更改时，子组件中的 Vue.js props 值不会更新

【英文标题】：Vue.js props value in the child component is not update when the value in root component is change

【发布时间】：2020-07-25 06:13:06

【问题描述】：

我已经从我的根组件收到了道具。通过我测试的<template>，当根组件中的值发生更改时，firstdata 会更新，但topic 仍然与它获得的第一个值相同。好像this.firstdata 只存储一次数据而无需进一步更新。

我使用return topic: this.firstdata 是因为我需要在我的java 脚本中使用topic，因为我不能在javascript 部分直接调用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>

【问题讨论】：

不明白你所说的“因为我不能在javascript部分直接调用 firstdata 。”？

为什么不能在组件中使用firstdata？您在设置topic 时确实使用了它，并且您可以在任何需要的地方继续以相同的方式使用它。

您能否在此处查看我的代码jsfiddle.net/L205bt84 在我的 PC 中，子组件中第 35 行的search_params.set('param1', this.topic); 可以工作，但它仍然是它获得的第一个值，不知道为什么在浏览器中它甚至无法获得第一个值，如果您尝试将 this.topic 更改为 'China' 您将看到 API 工作正常

【参考方案1】：

没错，因为data 函数只运行一次，所以topic 只分配了一次。如果您想持续观察和更新值，请使用计算：

computed: 
  topic() 
    return this.firstdata;
  

并从数据中删除topic。

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

【讨论】：

好的，现在 topic 可以在模板中更新，但可能主要问题仍然相同。当我在脚本部分使用 this.topic 时。 this.topic 仍然是第一个没有更新的值。

<main-chart-example v-bind:breedKey="breedKey" ，breedKey 是我的意思的第一个数据

computed: breedKey() return this.breeds[this.currentBreed].key; 在 parent 中，我通过这个计算方法得到了breedKey的更新值，然后我通过v-bind发送了这个值

您能否编辑您的问题以显示您问题中的所有相关代码，包括breeds 数据？您显示的代码应该可以工作，因此firstdata 可能没有正确更改或数据不是唯一的。

这很好，但如果可以的话，也显示 2 或 3 个 breeds 项目

【参考方案2】：

在computed中使用它：

computed: 
  topic() 
    return this.firstdata
  

【参考方案3】：

使用监视属性：

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