vue中使用typescript定义组件
如何搭建vue+typescript运行环境, 跟着@vuecli脚手架一步一步搭建就可以了, 我这里主要怎么创建组件.
创建组件一共有三种形式:
- 用vue.extend()
- 是用装饰器decorator
- 用tsx(jsx)方式
注意: 在使用装饰器的时候需要注意@props() 后面的变量要加 " ! " 英文感叹号, 不然typescript会报空指针错. 加了!后告诉typescript验证器 “验证器弟弟, 我这个变量等会肯定有值传进来的, 你去忙其他的,这儿不用你检查了!”
调用子组件的主组件代码
主组件调用子组件HelloComponents.vue
import Vue from "vue";
import HelloComponent from "./components/Hello";
let v = new Vue({
el: "#app",
template: `
<div>
Name: <input v-model="name" type="text">
<hello-component :name="name" :initialEnthusiasm="5" />
</div>
`,
data: {
name: "World" },
components: {
HelloComponent
}
});
1. 用vue.extend()方法
<!-- src/components/Hello.vue -->
<template>
<div>
<div class="greeting">Hello {
{
name}}{
{
exclamationMarks}}</div>
<button @click="decrement">-</button>
<button @click="increment">+</button>
</div>
<