vue父子组件通信实现模糊搜索功能

我遇到的问题:

我的搜索框在父页面,静态数据都在子页面。怎么实现模糊查询数据?
昨天的尝试:先把搜索的内容数据存到session里,然后从session里拿,
结果:存是存进去了,却拿不到。应该也是可以拿到的,但是我不会。。。。

今天先学习一下组件通信的知识,再来解决这个问题。

下面来记一下学习笔记:

1.组件通信:组件与组件之间的数据传递

1.1组件通信定义

组件之间的数据是独立的,一个组件无法直接访问其他组件的数据。如果在一个

组件中想使用其他组件的数据,可以用组件通信方案来解决这个问题。

1.2组件之间关系

父子关系:直接包裹的关系。用props和$emit传递数据
非父子关系:各自独立,没有任何关系。用provide&inject 传递或者用evenbus传递。

我遇到的问题是父子关系之间的传递,先针对性学习这块儿内容,然后活学活用把我遇到的问题解决再说。

2.父子组件通信如何实现?

2.1 父组件你给过props把数据传给子组

(1)父组件中定义一个属性iput4,并且给组件标签,以添加属性的方式来传值

<template><div>我是父组件<Index :input4="input4"> 我是子组件</Index></div>
</template><Script>//引入子组件import Index from "@/views/front/Index.vue";export default {data(){return {input4:''}},front:{Idenx}}</Script>

(1)子组件中,使用props定义需要接收的数据

export default {props:['input4'],}

2.2子组件利用$emit 通知父组件修改更新

3.使用router-view组件往子页面传数据

可以给父组件中router-view设置参数属性,子组件使用props接收参数。

**第一步:**父组件定义属性。本功能想传输的属性是用户在搜索框输入的数据input4。因此要用v-model绑定获取这个输入框的内容。

父组件的搜索框样式代码:

注意:v-model绑定输入框的内容input4。

 <el-input placeholder="请输入内容" type="text" v-model="input4"><i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>

**第二步:**父组件data中定义属性。

  data () {return {input4:''}},

第三步: 子组件中使用props接收这个属性

export default {props:['input4'],
}

**第四步:**父组件中绑定要传的参数

<div class="main-body"><router-view v-bind:input4="input4" />//:input4是父组件的属性,input4是子组件的属性。这里的属性一定要各自的组件定义的属性保持一致。</div>

**第五步:**渲染使用数据

1.在html直接渲染方式

<p> {{input4}}</p>

搞定!!!!!!

搜索框的数据传过去了,那么怎么实现模糊搜索呢?

如何使用vue实现模糊搜索(纯前端)?

因为搜索不能刷新页面,而是实时响应的根据搜索内容展示数据,这里要在computed中定义计算函数。

computed 是 Vue.js 中的一个属性,用于根据其他属性或状态计算出一个新的属性值。计算属性是基于响应式的,当其依赖的属性或状态发生变化时,它会自动更新。这使得计算属性非常适合用于处理复杂的逻辑或需要根据其他属性或状态进行计算的情况。

咱们的需求是要根据input4的变化,展示的数据也发生变化,因此非常符合计算属性。

在input4从父组件传过来之后,

第一步:

在computed定义新属性search。返回值把分页处理过的dataList。

 computed:{search(){console.log(888)let filter = this.articles.filter(item =>      item.title.includes(this.input4));this.total = filter.lengthlet list = splitList(filter, 9)this.dataList = list[this.pageNum - 1]return  this.dataList}},

**第二步:**data里需要定义的属性

  articles: [{id:1,title: '基于 Springboot+Vue+Bootstrap的电影票订票购票系统源码,可用于毕业设计、课程设计、练手学习', img: require('@/assets/imgs/dianyingpiao-3.jpg'), route:'/articleDetail', tabs:['Springboot2', 'Vue2', '不分离','BootStrap','票务系统','有文档']},{id:2,title: '基于 Springboot+Vue+Bootstrap的在线文件管理系统源码,可用于毕业设计、课程设计、练手学习', img: require('@/assets/imgs/wenjian-2.png'), route:'/WenjianDetail',tabs:['Springboot2', 'Vue2', '不分离', 'BootStrap', '工具类','有文档']},],tabs: ['Springboot2', 'Springboot3', 'SSM', 'Vue2', 'Vue3', '分离', '小程序', 'Bootstrap','小程序', '购物系统', '企业系统', '票务系统', '校园系统', '工具类','Element-UI', '不分离', '有文档', 'JSP', '博客论坛',],pageNum: 1,dataList: [],total: null,

第三步:

methods里面写一个点击页面跳转的方法

  methods: {handleCurrentChange(pageNum) {this.pageNum = pageNum;},}

**第四步:**HTML中渲染数据

因为search是数组,里面存的是键值对对象,因此要循环获取里面的数据

<el-col :span="8" v-for="item in search" :key="item.id">

搞定!!!!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/42782.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django学习收尾

启动项目命令 python manage.py runserver 文件上传功能实现 title "Form上传"if request.method "GET":form UpForm()return render(request, upload_form.html, {"form": form, "title": title})form UpForm(datarequest.POS…

Java对象创建究竟是在栈上还是堆上??

在 Java 中&#xff0c;对象的创建通常情况下是在堆上。 基本数据类型&#xff08;如 byte、short、int、long、float、double、char&#xff09;在方法内声明时&#xff0c;其值会存储在栈上。除了基本数据类型之外的所有对象&#xff0c;都是由 Java 虚拟机&#xff08;JVM&…

python入门基础知识·二

""" # Python介绍 # Python注释 # 单行注释&#xff1a; # # 多行注释&#xff1a; r """""" # Python输出和输入 # print: 输出 # input: 输入 ①会让程序暂停&#xff0c;②得到的是字符串内容 int(&…

Linux Mac 安装Higress 平替 Spring Cloud Gateway

Linux Mac 安装Higress 平替 Spring Cloud Gateway Higress是什么?传统网关分类Higress定位下载安装包执行安装命令执行脚本 安装成功打开管理界面使用方法configure.shreset.shstartup.shshutdown.shstatus.shlogs.sh Higress官网 Higress是什么? Higress是基于阿里内部的…

Vue指令详解与实操运用 - 编程魔法

在Vue.js的世界里&#xff0c;指令就像是一位魔法师&#xff0c;它们能够赋予HTML元素以生命&#xff0c;让网页与用户互动起来。今天&#xff0c;我们就来揭开这些指令的神秘面纱&#xff0c;看看它们是如何在我们的日常开发中发挥作用的。 1. v-text 和 v-html - 文字与内容的…

思考:Java内存模型和硬件内存模型

前言 前一阵在看volatile的原理&#xff0c;看到内存屏障和缓存一致性&#xff0c;发现再往底层挖就挖到了硬件和Java内存模型。这一块是自己似懂非懂的知识区&#xff0c;我一般称之为知识混沌区。因此整理这一篇文章。 什么是内存模型&#xff08;Memory Model&#xff09;…

CentOS6用文件配置IP模板

CentOS6用文件配置IP模板 到 CentOS6.9 , 默认还不能用 systemctl , 能用 service chkconfig sshd on 对应 systemctl enable sshd 启用,开机启动该服务 ### chkconfig sshd on 对应 systemctl enable sshd 启用,开机启动该服务 sudo chkconfig sshd onservice sshd start …

未羽研发测试管理平台

突然有一些觉悟&#xff0c;程序猿不能只会吭哧吭哧的低头做事&#xff0c;应该学会怎么去展示自己&#xff0c;怎么去宣传自己&#xff0c;怎么把自己想做的事表述清楚。 于是&#xff0c;这两天一直在整理自己的作品&#xff0c;也为接下来的找工作多做点准备。接下来…

LT7911UX 国产原装 一拖三 edp 转LVDS 可旋转 可缩放

2.一般说明 该LT7911UX是一种高性能Type-C/DP1.4a到MIPI或LVDS芯片的VR/显示应用。HDCP RX作为HDCP转发器的上游&#xff0c;可以与其他芯片的HDCP TX配合实现转发器功能。 对于DP1.4a输入&#xff0c;LT7911UX可配置为1/2/4通道。自适应均衡使其适用于长电缆应用&#xff0c;最…

Junior.Crypt.2024 CTF Web方向 题解WirteUp 全

Buy a cat 题目描述&#xff1a;Buy a cat 开题 第一思路是抓包改包 Very Secure App 题目描述&#xff1a;All secrets become clear 开题 乱输一个密码就登陆成功了&#xff08;不是弱口令&#xff09; 但是回显Your role is: user 但是有jwt&#xff01;&#xff01;&a…

深入理解基本数据结构:链表详解

引言 在计算机科学中&#xff0c;数据结构是存储、组织和管理数据的方式。链表是一种重要的线性数据结构&#xff0c;广泛应用于各种编程场景。在这篇博客中&#xff0c;我们将详细探讨链表的定义、特点、操作及其在不同编程语言中的实现。 什么是链表&#xff1f; 链表是一种…

Mobile ALOHA前传之VINN, Diffusion Policy和ACT对比

VINNDiffusion PolicyACT核心思想1.从离线数据中自监督学习获得一个视觉编码器&#xff1b;2.基于视觉编码器&#xff0c;从采集的示例操作数据中检索与当前观测图像最相似的N张图像以及对应的动作&#xff1b;3.基于图像编码器的距离对各个动作进行加权平均&#xff0c;获得最…

Open3D loss函数优化的ICP配准算法(精配准)

目录 一、概述 1.1ICP的基本步骤 1.2损失函数的设计 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2配准后点云 3.3计算数据 一、概述 ICP(Iterative Closest Point)配准算法是一种用于对齐两个点云的经典算法。其目标是通过迭代优化…

Istio实战教程:Service Mesh部署与流量管理

引言 Istio是一个开源的服务网格&#xff0c;它提供了一种统一的方法来连接、保护、控制和观察服务。本教程将指导你从零开始部署Istio&#xff0c;并展示如何使用Istio进行基本的流量管理。 环境准备 Kubernetes集群&#xff1a;Istio运行在Kubernetes之上&#xff0c;确保…

W25Q64 Flash存储器与STM32:硬件与软件的完美结合案例

摘要 在嵌入式系统中&#xff0c;数据存储是关键组成部分之一。W25Q64 Flash存储器因其高容量、低功耗和高可靠性&#xff0c;成为STM32微控制器项目中优选的存储解决方案。本文将展示W25Q64与STM32微控制器集成的案例&#xff0c;包括硬件设计、SPI通信协议实现和软件编程策略…

记录在Windows上安装Docker

在Windows上安装Docker时&#xff0c;可以选择使用不同的后端。 其中两个常见的选择是&#xff1a;WSL 2&#xff08;Windows Subsystem for Linux 2&#xff09;和 Hyper-V 后端。此外&#xff0c;还可以选择使用Windows容器。 三者的区别了解即可&#xff0c;推荐用WSL 2&…

我们公司落地大模型的路径、方法和坑

我们公司落地大模型的路径、方法和坑 李木子 AI大模型实验室 2024年07月02日 18:35 北京 最近一年&#xff0c;LLM&#xff08;大型语言模型&#xff09;已经成熟到可以投入实际应用中了。预计到 2025 年&#xff0c;AI 领域的投资会飙升到 2000 亿美元。现在&#xff0c;不只…

Thinking--在应用中添加动态水印,且不可删除

Thinking系列&#xff0c;旨在利用10分钟的时间传达一种可落地的编程思想。 水印是一种用于保护版权和识别内容的技术&#xff0c;通常用于图像、视频或文档中。它可以是文本、图像或两者的组合&#xff0c;通常半透明或以某种方式嵌入到内容中&#xff0c;使其不易被移除或篡改…

【Linux】多线程_2

文章目录 九、多线程2. 线程的控制 未完待续 九、多线程 2. 线程的控制 主线程退出 等同于 进程退出 等同于 所有线程都退出。为了避免主线程退出&#xff0c;但是新线程并没有执行完自己的任务的问题&#xff0c;主线程同样要跟进程一样等待新线程返回。 pthread_join 函数…

【代码随想录_Day28】62. 不同路径 63. 不同路径 II

Day28 OK&#xff0c;今日份的打卡&#xff01;第二十八天 以下是今日份的总结不同路径不同路径 II 以下是今日份的总结 62 不同路径 63 不同路径 II 今天的题目难度不低&#xff0c;尽量还是写一些简洁代码 ^ _ ^ 不同路径 思路&#xff1a; 1.确定dp数组&#xff08;dp…