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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（1）子组件中，使用props定义需要接收的数据

export default {
  props:['input4'],
 }
1
2
3

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>
1
2
3

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

  data () {
    return {
      input4:''
    }
  },
1
2
3
4
5

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

export default {
  props:['input4'],
}
1
2
3

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

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

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

1.在html直接渲染方式

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

搞定！！！！！！

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

如何使用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.length
      let list = splitList(filter, 9)
      this.dataList = list[this.pageNum - 1]
      return  this.dataList
    }
  },
1
2
3
4
5
6
7
8
9
10

**第二步：**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,
1
2
3
4
5
6
7
8
9

第三步：

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

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

1
2
3
4
5
6

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

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

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

搞定！！！！！！