当前位置: 首页 > Web前端 > vue.js

Vue3的正确打开方式(上)

时间:2023-03-31 22:27:17 vue.js

1.Vue3定义响应式数据(ref/reactive)import{reactive,toRefs}from'vue'exportdefault{setup(){constdata=reactive({title:'Hellozbw',todoList:[{id:1,name:'kyrie',age:18},{id:2,name:'wen',age:18}]})//1.toRefs:将普通对象转换为响应对象constrefData=toRefs(data)//2、也可以用ref定义constname=ref('kyrie')//取ref定义的数据时,需要获取其值conosle.log(name.value)//'kyrie'//修改name.value='wen'return{...refData}}}2.Vue3定义和使用全局属性(方法)vue.prototype替换为config.globalProperties//main.js全局定义import{createApp}from"vue";importAppfrom"./App.vue";constapp=createApp(App);//定义去抖动方法constdebounce=(fn,delay)=>{lettimer;return(...args)=>{if(timer)clearTimeout(timer);timer=setTimeout(()=>{fn.apply(this,args);},delay);};};//将debounce方法挂载到原型app.config.globalProperties.$debounce=debounce;//在.vue组件中使用import{getCurrentInstance}from'vue'//通过getCurrentInstance获取当前实例,取出debounceconst{proxy:{debounce}}=getCurrentInstance()//可以在组件中使用onMounted(()=>{data.onSubmit=debounce(data.onSubmit,500)})3.Vue3自定义指令(全局)import{createApp}from"vue”;从“./App.vue”导入应用程序;constapp=createApp(App);//全局注册一个命令来高亮文本app.directive("highlight",{//vue3修改了hook的名字,更加语义化beforeMount(el,binding,node){el.style.color=binding.value;},});//在.vue组件中使用自定义指令高亮显示此文本为红色

将这段文字高亮为绿色setup(){letpColor=ref('red')letiColor=ref('green')return{pColor,iColor}}4.Vue3父子通信(更改为$emit)Vue3增加了$emit选项(配置)emits:[]/{}可用于验证传给父组件的值//子组件//注意:不要写$emit的事件名这里是驼峰式,html无法解析驼峰式sayHelloexportdefault{//这个可以写成数组,和vue2一样,不带参数校验//emits:['say-hello']//如果需要校验传递给父组件的值,你可以写成对象形式真}其他{控制台。log('参数缺少msg')returnfalse}}}}//父组件setup(){sayHi(val){console.log(val,'传过来的值子组件')}}5.Vue3兄弟组件通信(mitt)//emit.jsimportmittfrom"mitt";exportconstemitter=mitt();//Child1.vueimport{emitter}from"../emit";//第一个参数:事件名称,第二个参数:传入的值emitter.emit('changeTitle','newtitle')//Child2.vueimport{emitter}from"../emit";//里面的componentValueconstdata=reactive({title:"OldTitle"})//value可以接收到Child1发射的值emitter.on('changeTitle',(value)=>{//修改组件数据的内部标题...,(type,val)=>{switch(type){case"increment":data.count+=值;休息;案例“递减”:data.count-=val;休息;case"changeTitle":data.title=val;休息;默认值:中断;}});//注意:如果你不想定义emit.js可以将发射器挂载到原型上6.Provide/Inject的使用(vue2版本)//main.jsapp.provide("userInfo",{username:"kyrie",password:"123456"});//在.vue组件中使用注入:{myUserInfo:{from:'userInfo'//{username:'kyrie',password:'123456'}}},