ts引入组件

ts引入组件

1.首先在 global.d.ts 文件中加上一段代码
主要目的是让ts文件识别vue组件，不然报错

// 让ts文件认识vue模板
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent
  export default component
}

2.在组件文件中引入 defineComponent

import { onBeforeMount, ref, defineComponent,reactive } from "vue";
export default defineComponent({
  name:"Head", //一般可以不写name防止因为name冲突导致的死循环
  setup() {
    const msg = ref("Hello world GanYunFei");
    const test:Object = reactive({a:1}); //reactive的作用,让数据变成可监测的，reactive主要用来定义响应式的复合数据类型，他的作用就是不会改变对象本身，但是会改变对象里面属性的值
    const tests:Object = ref(2) //ref的作用是，让数据变成可以监测的，ref主要是针对基本数据类型
    //生命周期都写在这里
    onBeforeMount(() => {});
    return {
      msg,
      test,
      tests
    };
  },
  components: {
  },
});