ele-h5项目使用vue3+vite开发:第三节、自定义hooks-useToggle实现搜索页展示切换

需求分析

  • 点击首页搜索框,出现搜索页
  • 点击搜索页,隐藏搜索页,展示首页
  • 新建搜索页组件
  • 实现效果
  • ele-h5项目使用vue3+vite开发:第三节、自定义hooks-useToggle实现搜索页展示切换_第1张图片
  • ele-h5项目使用vue3+vite开发:第三节、自定义hooks-useToggle实现搜索页展示切换_第2张图片

hooks介绍

理解

  • hooks 就是将去改变一个参数值时,页面也会更新对应的值的想法、抽象,用代码实现的地方

如何实现一个hooks

  • 在src(source)目录下创建一个use文件夹用来存放hooks文件
  • 在hooks文件中创建一个hooks
  • 写一个函数并用export来导出给对应的组件使用。
  • 该函数是用来接收和返回相关hooks的属性值或者函数、实例的
  • hooks 函数需要返回一个对象,对象中可以包含一些响应式的数据和一些方法。ele-h5项目使用vue3+vite开发:第三节、自定义hooks-useToggle实现搜索页展示切换_第3张图片

事件传递实现跨组件通信

理解

  • 事件传递实现跨组件通信, 流程是先创建一个hooks 用来进行参数传递,在 父组件HomeView中 针对子组件 searchView 和 子组件theTop中的 子组件 opSearch 进行跨组件通信

在组件中使用hooks实现 事件传递实现跨组件通信

  • 
    
    
    
    
    
    
    
    
    
    
    
    
    

你可能感兴趣的:(vue3,项目开发,前端)