前端文档

Appearance

On this page

完整的vue3 Composition Api 页面模板

html
<template>
  <!-- vue3 页面模版 如果是组件命名为 v-xxx -->
  <div class="xxx">
    defineComponent
    组件或页面内容
  </div>
</template>
<template>
  <!-- vue3 页面模版 如果是组件命名为 v-xxx -->
  <div class="xxx">
    defineComponent
    组件或页面内容
  </div>
</template>
js
import { defineComponent, getCurrentInstance, reactive, ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { IGlobalState } from '@/store';

//defineComponent: 在TypeScript下，给予了组件 正确的参数类型推断 
export default defineComponent({
  name: 'xxx',
  setup(props, context){
    //vue this
    const { proxy } : any = getCurrentInstance(); 
    //Vue Router
    const router = useRouter();
    //vue vuex store
    const store = useStore<IGlobalState>();

    //开发代码
  }
})
import { defineComponent, getCurrentInstance, reactive, ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { IGlobalState } from '@/store';

//defineComponent: 在TypeScript下，给予了组件 正确的参数类型推断 
export default defineComponent({
  name: 'xxx',
  setup(props, context){
    //vue this
    const { proxy } : any = getCurrentInstance(); 
    //Vue Router
    const router = useRouter();
    //vue vuex store
    const store = useStore<IGlobalState>();

    //开发代码
  }
})