如何以最小的响应量将TypeScript常量传递到Vue模板？

Question

我想知道将常量传递给模板的最佳方法是什么。目前，我正在使用 data，但据我了解，这应该主要用于随时间而变化的状态，并且Vue会向数据添加事件侦听器。这些常量仅仅是不变的值，用于模板输出，在应用程序的生命周期中永远不会改变。

<template>
  <div>
   <input type="radio" name="color" :value=Colors.GREEN />
   <input type="radio" name="color" :value=Colors.RED />
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Colors from '@/viewmodels/colors';

export default Vue.extend({
    name: 'ExampleComponent',
    data() {
        return () => {
            Colors
        }
    }
})
</script>

- chiborg

---

可能是如何在Vue模板中使用const？的重复问题。 - Etheryte

“Colors”的定义是什么？它是一个枚举类型吗？ - Andrew Eisenberg

Answer 1

这个决定基于您的组件生命周期内 Colors 的值是否会发生变化。如果不会改变，只需使用计算属性：

Vue.config.devtools = false;
Vue.config.productionTip = false;

const Colors = {
  GREEN: '#0F0',
};
Vue.component('ExampleComponent', {
  name: 'ExampleComponent',
  template: `
    <div>
      Value: <span style="color:${Colors.GREEN}">{{ Colors.GREEN }}</span>
    </div>
  `,
  computed: {
    Colors: () => Colors
  }
})
new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <example-component />
</div>

如果您计划更改它（基于用户交互或脚本），请将其放置在data()中：

Vue.config.devtools = false;
Vue.config.productionTip = false;

const Colors = {
  GREEN: '#0F0',
};
Vue.component('ExampleComponent', {
  name: 'ExampleComponent',
  template: `
    <div>
      Value: <span :style="{color: Colors.GREEN}">{{ Colors.GREEN }}</span>
      <button @click="changeColors">Change Colors</button>
    </div>
  `,
  data: () => ({
    Colors
  }),
  methods: {
    changeColors() {
      this.Colors = {
        GREEN: 'red'
      }
    }
  }
})
new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <example-component />
</div>

如果您想让用户在"颜色"中选择其中一个可用选项，意味着"颜色"的内容不会改变，因此您将使用计算属性和"data（）"来获取当前选择的颜色：

Vue.config.devtools = false;
Vue.config.productionTip = false;

const Colors = {
  GREEN: '#090',
  RED: '#C00',
  BLUE: '#009',
  ORANGE: '#F90'
};
Vue.component('ExampleComponent', {
  name: 'ExampleComponent',
  template: `
    <div> Value:
      <span 
        :style="{color: currentColor, fontWeight: 'bold'}"
        v-text="currentColor" />
      <select v-model="currentColor">
         <option 
           v-for="(color, key) of Colors"
           v-text="\`\${key}: \${color}\`"
           :key="key"
           :value="color" />
       </select>
    </div>
  `,
  data: () => ({
    currentColor: Colors.GREEN
  }),
  computed: {
    Colors: () => Colors
  },
  methods: {
    setColor(color) {
      this.currentColor = color;
    }
  }
})
new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <example-component />
</div>

您已更新您的问题并添加了复选框。因此，我添加了一个使用复选框和单选按钮的示例，具体取决于所需内容：

Vue.config.devtools = false;
Vue.config.productionTip = false;

const Colors = {
  GREEN: '#090',
  RED: '#C00',
  BLUE: '#009',
  ORANGE: '#F90'
};
Vue.component('ExampleComponent', {
  name: 'ExampleComponent',
  template: `
    <div> checkedColors:
      <label v-for="(color, key) of Colors"
             :key="key">
        <input name="color"
               type="checkbox"
               :value="color"
               v-model="checkedArray">
        <span v-text="color" :style="{color}" />
      </label>
      <hr>
      pickedColor: 
      <label v-for="(color, key) of Colors"
             :key="color">
        <input name="picked"
               type="radio"
               :value="color"
               v-model="picked">
        <span v-text="color" :style="{color}" />
      </label>
      <hr>
      <pre>checkedArray: {{ stringify(checkedArray) }}</pre>
      <pre>picked: {{ picked }}</pre>
    </div>
  `,
  data: () => ({
    checkedArray: [],
    picked: Colors.GREEN
  }),
  computed: {
    Colors: () => Colors
  },
  methods: {
    stringify(value) {
      return JSON.stringify(value, true, 2);
    }
  }
})
new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <example-component />
</div>

- tao