Question

我试图在*.vue文件中定义一个const

<script>
    export const CREATE_ACTION = 1
    export const UPDATE_ACTION = 2
<script>

并在模板中使用它们

<template>
    ...
    <select :disabled="mode === UPDATE_ACTION">
    ....
</template>

但似乎行不通。那么，我怎么能在vue模板中使用const？

Answer 1

将它们展示在您的数据上。

new Vue({
    ...
    data:{
        CREATE_ACTION: CREATE_ACTION
        UPDATE_ACTION: UPDATE_ACTION
    }
    ...
})

Answer 2

您可以将plugin用于此目的，因为您希望将其包含在多个组件中：

// constsPlugin.js
const YOUR_CONSTS = {
  CREATE_ACTION: 1,
  UPDATE_ACTION: 2
  ...
}

YourConsts.install = function (Vue, options) {
  Vue.prototype.$getConst = (key) => {
    return YOUR_CONSTS[key]
  }
}

export default YourConsts

在 main.js 或您定义new Vue()的地方，您必须像这样使用它：

import YourConsts from 'path/to/plugin'

Vue.use(YourConsts)

现在您可以在组件模板中使用它，如下所示：

<div>
   <select :disabled="mode === $getConst('UPDATE_ACTION')">
</div>

Answer 3

使用Mixins怎么样？这就是我做到的方式。不确定这是最佳方法还是推荐方法，但是代码看起来更简洁。

data / actions.js

export const CREATE_ACTION = 1;
export const UPDATE_ACTION = 2;

export const actionsMixin = {
  data() {
    return {
      CREATE_ACTION,
      UPDATE_ACTION
    }      
  }
}

MyComponent.vue

<template>
  <div v-if="action === CREATE_ACTION">Something</div>
</template>

<script>
import {actionsMixin, CREATE_ACTION} from './data/actions.js';

export default {
  mixins: [actionsMixin]
  data() {
    return {
      action: CREATE_ACTION
    }      
  }
}
</script>

Answer 4

<template>
  <div v-if="FOO_CONST.bar">Something</div>
</template>

<script>
import {FOO_CONST} from './const.js';

export default {
  data() {
    return {
      FOO_CONST: Object.freeze(FOO_CONST) // this makes vue not reactive this data property
    }      
  }
}
</script>

Answer 5

如果将它们公开在数据上，则意味着它们变得不必要的被动，如@ mix3d所提到的...

更好的方法是将它们添加到Vue对象Reactivity in Depth：

<template>
      <div v-if="action === CREATE_ACTION">Something</div>
</template>

<script>
export default {
    created() {
        this.CREATE_ACTION = CREATE_ACTION;
        this.UPDATE_ACTION = UPDATE_ACTION;
    }
})
</script>

Answer 6

我发现 Mixins 是一种以非响应方式向 vue 对象添加常量的巧妙方法。

首先创建您的常量：

// Action.js
const Action = {
  CREATE: 1,
  UPDATE: 2
}

Action.Mixin = {
  created () {
    this.Action = Action
  }
}

export default Action

然后在组件中：

<template>
  <select :disabled="mode === Action.UPDATE">
</template>

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

export default {
  mixins: [Action.Mixin]
}
</script>

这就像 Alessandro Benoit 和 L. Palaiokostas 的答案之间的交叉。

Answer 7

在 Vue 3 中，您可以使用 setup()。

示例：

<template>
  <div>
    hello {{ fooConst }}
  </div>
</template>

<script>
const fooConst = "bar";

export default {
  setup() {
    return {
      fooConst,
    }
  },
}
</script>

Answer 8

<template>
  <div>
    <p :style="{ color: $options.COLOR }">{{$options.HELLO}} {{$options.PERSON}}</p>
  </div>
</template>

<script>

const HELLO = 'Hello there.';
const COLOR = 'red';

export default
{
    mounted()
    {
        console.log('Hello world');
    },
    COLOR,
    HELLO,
    PERSON: 'General Kenobi!'
}
</script>

我怎么能在vue模板中使用const？

8 个答案: