1.用ts，vue-property-decorator编写简单的自定义组件，加一个自定义属性。将该自定义属性显示在模板里面。
2.在页面中引用该组件，并且传入属性值
b***@qq.com
- 发布：2020-06-12 18:50
- 更新：2020-06-12 18:50
- 阅读：739
产品分类： HbuilderX
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX版本号： 2.7.9
操作步骤：
预期结果：
组件正常显示，传入属性值显示正常
组件正常显示，传入属性值显示正常
实际结果：
属性值没有正常显示，只显示undefined
属性值没有正常显示，只显示undefined
bug描述：
使用 typescript编写自定义组件代码，代码如下：
<template name="IconButton">
<div
style="
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
"
<img src="/static/download.png" style="width: 24px; height: 24px;" />
<div style="color: #3c3b3b; font-size: 14px; margin-top: 5px;">
{{ titleText }}
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({
name: "IconButton",
})
export default class IconButton extends Vue {
@Prop({ default: "" })
public title!: string;
get titleText() {
if (!this.title) return "没有内容";
else return this.title;
}
}
</script>
<style></style>
生成的组件js代码如下：
Component({})
0 个回复