VUE3写法概览

VUE3写法概览

<template>
  <div id="main-box">
      <chirld v-if="isSHow" :formData='subForm' @close='closeChirld'></chirld>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from 'vue' //引入vue相关方法
import chirld from './chirld.vue'
import { useI18n } from "vue-i18n";
export default {
components: { chirld },/引入子组件/
emits: ['confirm'],
setup(props, { emit }) {
 const { t } = useI18n();
 const data = reactive({
    mailSubData: undefined,
 	subForm：{
 		name:'',
 		email:'',
 		isSHow:false
 	}
 })
 let stockTypeFlag = computed(() => {
     if (!data.mailSubData) {
       return false
     }
     return data.mailSubData.stockType === '1'
   })
   onMounted(() => {
     nextTick(() => {
        pageInit();//调接口
     })
   })
     // 获取数据
    async function pageInit() {
      try {
        let res = await _mailSubInit('');
        const { success, result } = res.data;
        if (success) {
        	emit('confirm', result.activityDate)
        	//t('info') //i18用法
        }
      } catch (error) {
        console.log(error);
      }
    }
     return {
      ...toRefs(data),
      stockTypeFlag
    }
  }
}
</script>
<style lang='scss' scoped>
</style>