如何以最少的反应量将TypeScript常量传递给Vue模板

时间:2019-05-13 16:19:02

标签: typescript templates vue.js constants

我想知道将常量传递给模板的最有效的方法是什么。目前,我正在使用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>

1 个答案:

答案 0 :(得分:2)

决定取决于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的内容不会更改,因此您将使用Colors的计算值,以及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>