vue3的编辑模板

{

     "Print to console": {

          "prefix": "vue3",

          "body": [

               "<!-- $0 -->",

               "<template>",

               "  <div></div>",

               "</template>",

               "",

               "<script name='' lang='ts' setup>",

               "import { reactive,toRefs,onBeforeMount,onMounted,ref ,provide, inject,defineExpose} from 'vue'",

               "import { useRouter, useRoute } from 'vue-router'",

               "interface Datalist {}",

               "interface IFormProps<T = any, L = Array<T>> {value?: T | undefined,defaultValue?: L | undefined,onChange?: ((value: T | undefined) => void) | undefined}",

               "",

               "interface GenericIdentityFn<Type> {",

               "age: Type",

               "pin: Number",

               "}",

               "const info: GenericIdentityFn<any> = reactive({",

               "age: '123',",

               "pin: 123,",

               "})",

               "const iformPorps = reactive<IFormProps>({value: '默认值',defaultValue: [],onChange: () => {'默认值'},})",

               "interface DataProps{msg?: string ,labels?: string[]}",

               "          const data: Datalist = reactive({",

               "",

               "          })",

               "//导出暴露",

               "function handlerExport() {}  defineExpose({ handlerExport,  })",

               "//子组件使用方法  1、引入组件-给组件实例ref=name 2、声明实例名 后调用是实例里的方法",

               "// 1、<Disbursement  ref= expendRef />",

               "// 2、const expendRef = ref<any>()",

               "//3、function handleDrawer(val: string) {if (val === '1') {expendRef.value.handlerExport()}}",

               "//组件接收默认值",

               "const props = withDefaults(defineProps<DataProps>(), {msg: 'hello',labels: () => ['one', 'two']})",

               "",

               "function handleName<T>(val: Array<T> | any): void {console.log('val', val)}",

               "          onBeforeMount(() => {",

               "              console.log('2.组件挂载页面之前执行----onBeforeMount')",

               "          })",

               "          onMounted(() => {",

               "              console.log('3.-组件挂载到页面之后执行-------onMounted')",

               "          })",

               "          const {} = toRefs(data);",

               "",

               "</script>",

               "<style scoped lang='scss'>",

               "</style>",

          ],

          "description": "Log output to console"

     }

}