VueJs更新数据非对象类型道具更改时的问题

Question

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

我的代码是打击

模板代码：

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

vue code：

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不会更新数据。

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

Answer 1

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

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

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

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>