首页 > 其他分享 >vue3 hooks使用watch监听注意事项

vue3 hooks使用watch监听注意事项

时间:2023-10-20 15:48:16浏览次数:37  
标签:search vue hooks watch vue3 路由

当我们再vue3 写了一个通用hooks的里面使用watch来执行某些操作要注意!!!

一个页面只能再根路由去创建实例,也就是调用 对呀hooks,如果子路由也需要使用 则由根路由 provide() 子路由inject,如果子路由都创建实例,会造成多次执行监听
例如

我们由一个useSearch,来写通用搜索逻辑,在该hooks使用
路由 Home.vue->Search.vue->SearchInput.vue 我们需要在search和searchInput使用到该hooks
1:在根路由Home.vue 创建实例 const search= useSearch() 然后 provide('search',search)

2:在需要使用到的子路由 const { kw, .....}=inject('search')即可

 

标签:search,vue,hooks,watch,vue3,路由
From: https://www.cnblogs.com/tanyy/p/17777229.html

相关文章

  • vue2和vue3导出页面为PDF格式:jspdf和html2canvas
    一、vue2导出PDF使用步骤1、安装html2canvas,将页面html转换成图片npminstall--savehtml2canvas卸载:npmuninstallhtml2canvas指定版本安装:[email protected]、安装jspdf,将图片生成pdfnpminstalljspdf--save3、定义全局函数在指......
  • import { useRouter } from 'next/router'; 在非hooks 文件或组件中使用
    将 import{useRouter}from'next/router';改为 importRouterfrom"next/router";使用: Router.push('/');原来使用 import{useRouter}from'next/router';会导致报错如下  ......
  • 【Vue3响应式入门#01】Reactivity
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......
  • vue3文件导入导出
    导入://导入constimportExcel=async(file:any)=>{letformData=newFormData();//声明一个FormDate对象formData.append("file",file.raw);//把文件信息放入对象中//调用后台导入的接口importExcelAccount(formData).then(res=>{......
  • vue2.x和vue3.x关于获取表格某一行的写法真的不同绝了
    vue2.x<el-table-columnlabel="测试"align="center"prop="ce"><templateslot-scope="scope"><span>{{scope.row.ce}}</span></template>vue3.x<el-table-columnprop=&q......
  • vue3.x增加数据功能
    具体代码<template><el-form:model="form":rules="rules"ref="ruleFormSSS"label-width="120px"><el-form-itemlabel="用户姓名"prop="name"><el-inputv-model="form.......
  • 需求:vue3+swiper+ts实现轮播图(中间主体轮播,左右各显示部分)
    一、下载安装swiper安装:pnpminstallswiper使用你熟悉的方式来安装(yarnnpmcnpm)二、在项目中引入swiper1.main.js文件点击查看代码import'swiper/swiper-bundle.css';import"swiper/css"2.页面代码实现点击查看代码<scriptsetup>import{ref,reactive}fr......
  • Vite+Vue3 加载速度优化
    可以考虑从以下几个方面优化。整体思路:1.减小打包体积。2.异步加载。静态资源拆分打包在常规打包方法下,所有的第三方依赖将会都打包在一个vendor.js文件里,首次打开页面时,服务器会先加载这个大文件,导致白屏时间过长。而我们打包时,事先将依赖拆分成很多小文件各自进行打包,便可......
  • Qt 文件目录操作 QDir、QFile、QTemporaryDir/File、QTextStream、QDataStream、QSett
    摘要:  这一篇Qt博文主要介绍在Qt开发中对于文件目录操作相关处理的时候可以用到哪些类,这些类的作用是什么,大致应该怎么用,类的常用类方法及相关需要注意的事项等等,更加细致的需根据类名查找翻阅官方帮助文档。  QT提供的与文件和目录操作相关的类有以下几个:QDir:类提供对......
  • Vue3 element-plus el-cascader后缀图标更改(svg)
    概述今天用element-plus写通用表单的时候,发现了它的el-cascader组件竟然不支持改后缀图标,主要它的普通下拉el-select组件都能随便改suffix-icon,级联的下拉就不支持了,令人疑惑。    然后,找了好多办法,包括直接取原生的Component改它的arrowDown属性,发现也不支持了。没......