首页 文章

Vue使子组件中的数据不更新

提问于
浏览 次
2

大家好，我只想要一些关于vue道具数据的解释 . 所以我将值从父组件传递给子组件 . 问题是当父数据有数据更改/更新时它没有在子组件中更新 .

Vue.component('child-component', {
  template: '<div class="child">{{val}}</div>',
  props: ['testData'],
  data: function () {
    return {
        val: this.testData
    }
  }
});

但是使用道具名称 {} 它正在显示来自父级的数据

Vue.component('child-component', {
  template: '<div class="child">{{testData}}</div>',
  props: ['testData'],
  data: function () {
    return {
        val: this.testData
    }
  }
});

提前致谢

小提琴link

javascript vue.js vuejs2 frontend vue-component

1 回答

  • 4

    最好用一个非常简单的例子来解释

    let a = 'foo'
let b = a
a = 'bar'

console.info('a', a)
console.info('b', b)

    当你分配......

    val: this.testData

    在创建组件时，您将 initial value 设置为 val . 对道具的更改不会反映在 val 中，与上述 a 的更改未反映在 b 中的方式相同 .

    见https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow

    回复于

相关问题