如何在带有 TypeScript 的 Vue.js 中使用计算道具? [英] How to use computed props in Vue.js with TypeScript?
问题描述
关于如何使用 JavaScript 语言与 Vue.js 交互的文档有很多，而关于 TypeScript 的文档也很少.问题是如果 vue 组件是用 TypeScript 编写的，你如何定义 computed 属性?
根据官方示例，计算 是一个带有函数的对象，这些函数将根据它们的依赖属性进行缓存.
这是我做的一个例子:
从'vue'导入Vue；从vue-property-decorator"导入{组件}；@成分({})导出默认类 ComputedDemo 扩展 Vue {私人名字:字符串 = '约翰';私人姓氏:字符串 = 'Doe';私有计算:对象 = {全名():字符串{返回 `${this.firstName} ${this.lastName}`;},}}和 html:
<h1>计算道具 ts 演示</h1><ul><li>名字:{{firstName}}</li><li>姓氏:{{lastName}}</li><li>一起:{{fullName}}</li>第三个列表项不输出任何内容.有人能告诉我在这种情况下如何定义 computed 吗?
您可以使用属性访问器来声明计算属性.请参阅 Vue 类组件.只要您输入内容，getter 就会被触发.
例如:
<div><输入类型=文本"名称=测试值"id=""v-model=文本"><label>{{label}}</label></模板><script lang="ts">从vue-property-decorator"导入 { Component, Vue, Watch };@成分({})导出默认类关于扩展Vue {私人文本=测试"；获取标签(){返回 this.text;}}
Vue Composition Api 的更新
<div><输入类型=文本"名称=测试值"id v-model =文本"/><label>{{label}}</label></模板><script lang="ts">从@vue/composition-api"导入{defineComponent、ref、computed}；导出默认defineComponent({设置() {const text = ref(测试");const 标签 = 计算(() => {返回文本值；});返回 {文本，标签};}});
There is a lot of documentation how to interact with Vue.js using the JavaScript language and just a little about TypeScript. The question is how do you define computed props in a vue component if it is written in TypeScript?
According the official example, computed is an object with functions which will be cached based on their dependent props.
Here is an example I made:
import Vue from 'vue';
import { Component } from "vue-property-decorator";
@Component({})
export default class ComputedDemo extends Vue {
private firstName: string = 'John';
private lastName: string = 'Doe';
private computed: object = {
fullName(): string {
return `${this.firstName} ${this.lastName}`;
},
}
}
And html:
<div>
<h1>Computed props ts demo</h1>
<ul>
<li>First name: {{firstName}}</li>
<li>Last name: {{lastName}}</li>
<li>Together: {{fullName}}</li>
</ul>
</div>
The third list item outputs nothing. Can anybody tell me how to define computed in this case, please?
You can use property accessors to declare computed properties. See Vue Class Component. The getter will be triggered as soon as you type in the input.
For example:
<template>
<div>
<input type="text" name="Test Value" id="" v-model="text">
<label>{{label}}</label>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
@Component({})
export default class About extends Vue {
private text = "test";
get label() {
return this.text;
}
}
</script>
Update for Vue Composition Api
<template>
<div>
<input type="text" name="Test Value" id v-model="text" />
<label>{{label}}</label>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "@vue/composition-api";
export default defineComponent({
setup() {
const text = ref("test");
const label = computed(() => {
return text.value;
});
return {
text,
label
};
}
});
</script>
这篇关于如何在带有 TypeScript 的 Vue.js 中使用计算道具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
