update.vue 798 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <div class="update-demo">
  3. <dv-percent-pond :config="config" style="width:200px;height:100px;" />
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'UpdateDemo',
  9. data () {
  10. return {
  11. config: {
  12. value: 66,
  13. lineDash: [10, 2]
  14. }
  15. }
  16. },
  17. methods: {
  18. // 更新数据的示例方法
  19. updateHandler () {
  20. const { config } = this
  21. /**
  22. * 只是这样做是无效
  23. * config指向的内存地址没有发生变化
  24. * 组件无法侦知数据变化
  25. */
  26. this.config.value = 90
  27. this.config.lineDash = [10, 4]
  28. /**
  29. * 使用ES6拓展运算符生成新的props对象
  30. * 组件侦知数据变化 自动刷新状态
  31. */
  32. this.config = { ...this.config }
  33. }
  34. }
  35. }
  36. </script>