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