vue3.2 setup语法糖

  1. main.js

通过按需导入 createApp方法来构建vue实例

使用vue.use（）来挂载方法、插件

  1. template
1
<template>标签可以支持多个根标签
  1. vuex

通过createStore方法构建store实例

  1. router

通过按需导入createRouter方法来构建router实例

通过按需导入createWebHashHistory来构建hash模式对象，进行路由模式的导入

使用Proxy来代替Object.defineProperty(),解决了不能检测数组和对象变化 的限制

scss

sass预处理器使用::v-deep深度选择器抛出如下警告

image-20221004110752748

1
2
3
//  原因
::deep已经被vue3废弃
使用 ：deep(.类名)

去除el-input的默认边框

1
2
3
4
5
6
7
.el-input__wrapper {
                width: 100%;
                background-color: transparent;
                border: none !important;
                box-shadow: none !important;
                padding: 0px; //前边边距去掉
            }

vue3获取dom的方法

1
2
<div class="icon-box" ref="menu_item"></div> 
const menu_item = ref();

vue3.2 父组件触发子组件方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//子组件中
const Show = (event:any) => {
    //event接收参数
     console.log(event,'我被父组件调用了');
}
//暴露
defineExpose({ Show })

//父组件中
    <Son ref="son"></Son>
//获取子组件实例
const son=ref()
//直接调用
son.value.Show(a,b)