prototype.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <view class="u-demo">
  3. <view class="u-demo-wrap">
  4. <view class="u-demo-title">演示效果</view>
  5. <view class="u-demo-area">
  6. <view class="u-no-demo-here" style="text-align: left;">
  7. 此处为演示定义在main.js中的"Vue.prototype"全局变量的使用,它不是动态响应的,修改后本页面和上一个页面的值,都不会自动刷新
  8. </view>
  9. <view class="u-demo-result-line">
  10. {{vuePrototype}}
  11. </view>
  12. </view>
  13. </view>
  14. <view class="u-config-wrap">
  15. <view class="u-config-title u-border-bottom">
  16. 参数配置
  17. </view>
  18. <view class="u-config-item">
  19. <view class="u-item-title">修改vuePrototype为如下值</view>
  20. <u-subsection :list="['鹅黄', '橙黄', '茶绿']" @change="vuePrototypeChange"></u-subsection>
  21. </view>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. result: null
  30. }
  31. },
  32. onShow() {
  33. },
  34. methods: {
  35. vuePrototypeChange(index) {
  36. // 你会发现,此处修改/main.js中通过Vue.prototype绑定的值,它是静态的
  37. // 此页面修改后,返回上一个页面,无法全局响应
  38. this.vuePrototype = index == 0 ? '鹅黄' : index == 1 ? '橙黄' : '茶绿';
  39. }
  40. }
  41. }
  42. </script>
  43. <style lang="scss" scoped>
  44. .u-demo {}
  45. </style>