Question

我是新vue js。我不知道为什么在更改父组件中的值时子组件中的值不会更新。谁能为我解释？我知道我可以使用Times Updated: {{ times}}进行显示。但我想将其分配给其他操作

父母 HTML

<div id="test">
  <button @click="clicktime">Click</button>
  <times-updated :times.sync="myData"></times-updated>
</div>

.js文件

var vm = new Vue({
  el: '#test',
  data(){
    return {
      myData: 100
    }
  },

  methods: {
    clicktime() {
      vm.myData = Math.random();
    }
  }
})

孩子

Vue.component('times-updated', {
  props:["times"],
  data() {
    return {
      count: this.times
  }
},
  template: '<span>Times Updated: {{ count }}</span>',
});

链接codepen：enter link description here

Answer 1

您需要userInteractionEnabled数据而不是数据元素，以保持监视和更新

computed

Vue.component('times-updated', {
  props:["times"],
  computed: {
    count: function(){
       return this.times;
    }
  },
  template: '<span>Times Updated: {{count}}</span>',
});

var vm = new Vue({
  el: '#test',
  data(){
    return {
      myData: 100
    }
  },

  methods: {
    clicktime() {
      vm.myData = Math.random();
    }
  }
})

Answer 2

在孩子中，您可以直接使用prop值，然后它将起作用：

Vue.component('times-updated', {
  props:["times"],
  data() {
    return {
      count: this.times // not needed, not reactive
  }
},
  template: '<span>Times Updated: {{ this.times }}</span>',
});

子组件不更新父项的值

2 个答案: