时间戳

首页 > 解决方案 > 子组件不更新父组件的值

vue.js - 子组件不更新父组件的值

问题描述

我是新的 vue js。我不知道为什么当我更改父组件中的值时子组件中的值不会更新。谁能为我解释一下？我知道我可以Times Updated: {{ times}}用来展示。但我想把它分配给 count 做别的事情

父 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：在此处输入链接描述

标签： vue.js

解决方案

您需要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();
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="test">
  <button @click="clicktime">Click</button>
  <times-updated :times.sync="myData"></times-updated>
</div>

推荐阅读