(十八)补充-Vue3中插槽的使用
在子组件中写插槽标签slot给slot添加name属性。
我们可以看一下下面这个案例: 我们一共在Vue实例中使用了2次子组件,第一次父组件没有往子组件中传递元素,第二次父组件有往子组件传递元素。
什么是插槽? 在vue中通过slot可以向组件中指定位置插入内容。
Vue3中ref的使用
1、ref:一般用在定义基本类型和引用类型,如果是引用类型底层会借助reactive形成proxy代理对象,可以直接复制整个对象,如table的数据请求回来,需要将数据整体赋值个响应对象这时如果使用的是reactive就无法进行响应。
2、ref 需要在dom渲染完成后才会有 ,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用 ,或者 在 this.$nextTick(()={}) 中调用 。
3、在vue3的setup中可以使用ref变量的方式或者getCurrentInstance两种方式来使用Ref,从使用方便的程度上来看,更加推荐使用ref变量的方式。
4、reactive API 很好地解决了 Vue2 通过 defineProperty 实现数据响应式时的缺陷。使用也非常简单:当将 ref 分配给 reactive property 时,ref 将被自动解包,无需再用 .value 访问。
5、vue给我们提供一个操作dom的属性, ref 。
Vue3使用时遇到的问题
1、vue3中组件跳转之后页面不显示 可能的原因有很多,大部分是路由和组件引入的问题,除此之外还要注意内置组件 transition 的使用带来的问题。仅支持单个元素或组件作为其插槽内容。
2、vue3+ts中使用process报错,找不到名称“process”。
3、原因是VueCLI版本的问题,Node.js版本的问题,网络连接问题,本地环境问题。VueCLI版本的问题:Vue3需要使用VueCLI0及以上版本,如果使用的是旧版本的VueCLI,可能会导致配置失败。
4、网络信号差。vue3代码在测试环境网络号而生产环境是网络信号差导致的报错。该软件是一款非常需要网络状况优秀的平台,在网络不佳的时,会导致此平台连接失败无法查看信息以及报错等情况,可将其更换网络为优秀网络即可。
5、本文将介绍两种解决方案来解决这个问题(假定你的项目使用 Vue-Cli 进行初始化)。若版本在 v0.0 以上,跳转到 Step 2,否则直接到 Step 3 的内容。
6、转接代码错误。vue3切换tab页签时由于这个转接代码错误导致query参数丢失,需要修改这个代码。vue3提供了更好的性能,更小的捆绑包体积,更好的TS集成,用于处理大规模用例的新API。