Question

我对Vue.js很新，所以它可能很典型，但对我来说这很奇怪 - 我正在使用Iview并拥有像

这样的父组件

<template lang="pug">
  div
    Medics()
    Managers()
</template>

和两个类似的子组件

医务人员

<template lang="pug">
  ...
    Table(:columns="table.columns", :data="table.data")
  ...
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        table: {
          columns: [],
          data: []
      }
   }
</script>

管理员

<template lang="pug">
  ...
    Table(:columns="table.columns", :data="table.data")
  ...
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        table: {
          columns: [],
          data: []
      }
   }
</script>

它工作得很好。但是，如果我将两个组件中的table 更改为某些外部常量，例如

//constants.js
const CONSTANTS = {
  EMPTY_TABLE: {
    columns: [],
    data: []
  },
  SUCCESSFUL_RESPONSE: {
    result: 'success'
  }
}

module.exports = CONSTANTS

（使用Vue插件）

// constantPlugin.js
import CONSTANTS from './constants.js'

const Constants = {
  install(Vue, options) {
    Vue.prototype.$getConst = (key) => {
      return CONSTANTS[key]
    }
  }
}

export default Constants


//main.js
import Constants from '../lib/constantsPlugin'
Vue.use(Constants)

然后

<script>
  import constants from './constants.js'

  export default {
    components: {},
    data() {
      return {
        table: { this.$getConst('EMPTY_TABLE')  }
   }
</script>

在更改之后，两个表都会显示相同的数据，尽管将它们划分为不同的组件（ Medics 和 Managers ）。

我做错了什么？应该如何做？

编辑：添加了Vue插件，但仍然没有使用它。

使用外部常量的奇怪Vue.js行为

0 个答案: