VueJs更新数据问题时对象类型道具不改变

Posted 2023-02-23

【中文标题】VueJs更新数据问题时对象类型道具不改变

【英文标题】：VueJs Updating data Issue when not object type props change

【发布时间】：2018-07-10 01:15:04

【问题描述】：

我正在使用 VueJS，我想做的是每次道具更改时更新数据。

我的代码坏了

模板代码：

<div id="app">
<input type="text" v-model="hello">
<my-component :message="hello"></message>
</div>   

vue 代码：

var Child = 
template: '<div>props: message data: msg.value</div>',
props: 
  message: 
    type: String
   
,
data: function () 
  return 
    msg: 
      value: this.message
    
  
 

new Vue(
  el: '#app',    
data: function () 
  return 
    hello: 'Hello World !!!'
  
,
components: 
  myComponent: Child
 
)

结果：

我发现父组件传递的String Type Props并没有更新数据。

我认为这似乎是观察者的问题。 请给出任何想法。

【问题讨论】：

为什么要将prop 复制到组件data 中？除非您打算更改组件中的副本，否则真的没有必要

@Phil 上面的代码只是示例代码，我正在做的项目中绝对需要它。

您是否有理由不能为msg 使用计算属性？这通常是推荐的方法~vuejs.org/v2/guide/computed.html

从你的例子中也不清楚你为什么需要这个。也许您的示例可以包含一些进一步解释的内容？

【参考方案1】：

听起来您想观看道具并更新数据。例如

watch: 
  message (newValue, oldValue) 
    this.msg.value = newValue
  

请注意，当message 更改时，这将覆盖您对msg.value 所做的任何更改，我不完全确定您为什么要这样做。

var Child = 
  template: `<section>
    <div>props: message data: msg.value</div>
    <button @click="msg.value = 'Goodbye, cruel world'">Bye</button>
  </section>`,
  props: 
    message: 
      type: String
    
  ,
  data() 
    return 
      msg: 
        value: this.message
      
    
  ,
  watch: 
    message(newValue, oldValue) 
      this.msg.value = newValue
    
  

new Vue(
  el: '#app',
  data: 
    hello: 'Hello World !!!'
  ,
  components: 
    myComponent: Child
  
)

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <input type="text" v-model="hello">
  <my-component :message="hello" />
</div>

【讨论】：

我已经知道如何使用watch了，我只是想知道为什么string类型的props不能更新数据，如果传递对象类型的props，数据就会更新。可能是观察者的问题。无论如何感谢您的帮助！

@happenask 我觉得你应该看看这个~***.com/questions/518000/…