如何以最少的反应性将 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>

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>

如果您希望允许用户选择颜色中的可用选项之一，则意味着Colors内容不会更改，因此您将使用计算的 forColors以及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>