vue3.0使用

vue3.0的笔记

声明
一般简单数据类型声明用ref， 使用是需要加 .value 才能获取到数据。（ref可以转化简单数据类型转化为响应式对象，ref 可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要 .value）

reactive 可以转换对象成为响应式数据对象，但是不支持简单数据类型
一般直接使用ref 然后复杂数据类型（不操作的情况下）会使用外联的config.ts在里面声明之后取出

interface templateUrlInter {
[propName: string]: string;
} 有这样声明对象的
我们项目中一般都是使用any
父子传值会声明类型

父子传值
父向子传值 和2差不多 属性绑定
接收使用

 import { defineProps} from 'vue';
 interface drawerInterface {
    title?: string;
    visible: boolean;
}
const props = defineProps<drawerInterface>(); 

子调用父的方法
接收使用

 import {, defineEmits} from 'vue';
const emits = defineEmits(['onSubmit', 'closeDrawer']);  //方法
//或者直接导出 问题来了，这里可以挟带参数 ，但父获取子的数据和方法是下面这种用法

父直接拿子的数据或者调用方法

defineExpose({ resetForm });
声明ref
historyTableRef.value?.resetForm 

watch的使用

watch(
    () => data,
    (newVal, oldVal) => {
    }
);

computed的使用

computed(()=>{ return  model })

** 乾坤部署是 定位元素发生偏移**
乾坤部署找不到body 在 需要自己设置一个加上定位

:getPopupContainer="getPopupContainer"
const getPopupContainer = (node: any, dialogContext: any) => {
    if (node) {
        return node.parentNode;
    } else {
        // return document.body;
        return document.querySelector('#change-app-container');
    }
};
//局部的
export function getPopupContainer(node?: HTMLElement): HTMLElement {
    return document.querySelector('#change-app-container') as HTMLElement;
}

反向代理

module.exports = defineConfig({
    devServer: {
        port: 8080,
        headers: {
            'Access-Control-Allow-Origin': '*', //设置请求头
        },
        proxy: {
            '/pdm-api': { //需要代理的接口
                target: 'http://hid.qd-huangdao-ctcc.haier.net/pdm-api/', //目标服务器
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/pdm-api': '', //重定向
                },
            },
        },
    },