vue3+ts +pinia 自己记录的 写的乱

1，父传子

const props = defineProps({
    type: {
        default: 'edit',
        type: String,
    },

});
 

标签

 vue3（中没有this）

父子组件传参 

 单个父子传参  子组件

 

 多个父子传参

用v-model 可以直接更改子组件的数据

 

 useAttrs 可以获取父组件传参的所有内容  事件也能接收到

 使用 或者不用    ：type  直接用  ：

 useAttrs 和defineprops不能用时使用  props的优先级更高 

 ref 获取真是的dom节点 及子组件的实力vc

$parent 可以在子组件内部获取到父组件的实力

子组件必须对外暴露 父组件才可以读取到

 $parent

 provide （提供）和inject 注入   隔辈传入数据（数据可更改）

父组件

 子组件 使用并修改

 pinia 的使用  相当于vuex的储存  

 使用必须引入在赋值

 获取值   （ref数值必须。value 获取）

1，（比较少用）

 2，使用比较不简洁

3，用pinia的 storeTorefs

修改数据  直接改

//第二种方法 （很多数据使用第二种）

 第三种使用方式

store中   actions

 使用的时候直接调取

 

例如： 

 

 

 getters

1，第一种

 2，第二种用this和不用this都行

 

 或（）不用值  可以用ts中的给个样式

 订阅   $subscribe 监听store的值 

 使用  可以在监听的时候存储在本地存储

 拿本地存储 使关闭浏览器仍然在   as string  断言就是个字符串  

store 写法  组合式store

 组合式store

wacth 

监听的时候不用  （不是对象）.value

监听对象是需要.vaule

1第一种方法  监听的是ref的值

immediate 上来就检视

 或者是深度监听  监听所有：

 3，watch监听一个和监听多个 

 完整的

监听对象的值： 如果用上面的  新值旧值都是新值

1，需要.value   可以获取到

 2，如果嵌套层次比较多

 如果直接检视reactive相应书的值 deep无效

监听对象中的某个属性 写成函数

监听对象中的某些属性 写成数组

特殊情况 监听job  加deep：true

 watchEffect  一下监视所有   只要使用了都监视了

 

计算属性 computed

只读的

可以修改的完整写法

 组件通信 （page路由组件）

1，父子组件通信   父传子

父传子

 

 2，自定义事件

传参的事件对象$event  

 ref的数据在母版里面不用value

 

 

 

 3,发布订阅  mitt   任意组件通信

 在main 中引入 

绑定事件

 使用  这是两个子组件的举例  任意组件通信

但是在组件卸载时解绑它 要不然占内容

 4，v-model  不常用

总共

 ref（都可以）和reactive（只能定义对象，定义的数据不能直接修改能用它）

 

 

 使用

shallowref（只能处理浅层次的  ）针对与多层次的数据   ref能把所有的都改成响应式的   

深层次的

浅层次的 

 

 shallowReactive （也是能改第一层）

readonly 只读 不能直接赋值 例如（99） 只能是响应式的  用来保护数据

shallreadonly 浅层只读

ref和reactive都可以

sum2不能改 sum1可以改 sum2随着sum1变动

就是保护sum1的数据  要是想要不动  就用readonly 复制个只读的sum2  防止过程中动到sum1

 toraw 可以把响应式对象改为原始对象 （改数据不变了）

 markRaw  标记一个对象 使其永远不会成为响应式

例如 mockjs

mockjs响应式不能用于响应式的 

 cusromRef 自定义ref

 例如 改变一个值之后想要一秒钟之后页面数据在变 默认ref不能实现

 

 有track （）告诉vue 数据很重要，你要对msg进行持续关注，一旦msg变化就去更新

和trigger（）通知vue 一下数据msg‘变化    参数才能变

 定时器记得去除

 

 公司一般封装hoos  一般文件us开头

使用

midal框  模态框   teleport传送门

弹窗

 

 

加上它 参考窗口定位就不行了就参考父容器定位了

 teleport 组件 传送门

    Suspenbse   setup 里面 await 不用aync 

因为有异步组件    这个时候子组件不显示了   用Suspenbse 包裹   为了在加载中有东西呈现 （加载中）

 这个是加在的时候有loading

全局属性

main

配置全据数据

 使用

 

配置全局属性  main.js

 使用

vue2 和vue3的区别

vue.(vue2)  变成了app.(vue3)

 参考vue3的文档

 TypeScript 与组合式 API | Vue.js