Как передать константы TypeScript в шаблоны Vue с наименьшим количеством реактивности - PullRequest
Новая
       17

Как передать константы TypeScript в шаблоны Vue с наименьшим количеством реактивности

1 голос
/ 13 мая 2019

Мне интересно, какой самый эффективный способ передать константу в шаблон.В настоящее время я использую 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 Ответ

2 голосов
/ 13 мая 2019

Решение основывается на том, будет ли значение 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: `
 checkedColors:
      
      
      pickedColor: 
      
      
      checkedArray: {{ stringify(checkedArray) }}
picked: {{ picked }}
`, данные: () => ({ checkArray: [], выбрал: Colors.GREEN }), вычислено: { Цвета: () => Цвета }, методы: { stringify (значение) { return JSON.stringify (value, true, 2); } } }) новое Vue ({ el: '#app', }) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

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