vue中使用typescript定义组件

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>
<