怎么使用Vue实现添加好友功能

这篇文章主要介绍了怎么使用Vue实现添加好友功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用Vue实现添加好友功能文章都会有所收获，下面我们一起来看看吧。

一、前置知识

在开始介绍添加好友功能之前，我们需要了解以下内容：

1. 使用Vue CLI创建项目；

2. Vue组件的基本概念和使用方法；

3. 父子组件传值的方法；

4. Vue Router的基本概念和使用方法。

二、设计页面

在设计添加好友的页面时，我们需要考虑页面的布局和功能。通常，添加好友功能需要包含以下内容：

1. 搜索框：用户可以在搜索框中输入好友的名字或者ID，进行搜索；

2. 用户列表：根据搜索结果显示用户列表；

3. 添加好友按钮：用户可以通过点击添加好友按钮，向搜索结果中的用户发送好友请求。

根据以上内容，我们可以设计以下页面布局：

<template>  <div class="friend-add">    <!-- 搜索框部分 -->    <div class="search-bar">      <input type="text" placeholder="请输入好友名字或ID" v-model="keyWord">      <button @click="search">搜索</button>    </div>    <!-- 用户列表部分 -->    <div class="user-list">      <ul>        <li v-for="(user, index) in userList" :key="index">          {{ user.name }}          <button @click="addFriend(user)">添加好友</button>        </li>      </ul>    </div>  </div></template>

三、实现功能

在设计好页面布局之后，我们需要实现添加好友的功能。以下是具体的实现方法：

1. 获取用户列表

用户在搜索框中输入关键词之后，我们需要通过接口请求，获取到符合搜索条件的用户列表。在Vue中，我们通常将这个功能封装到一个组件中：

<template>  <div class="user-list">    <ul>      <li v-for="(user, index) in userList" :key="index">{{ user.name }}</li>    </ul>  </div></template><script>  export default {    data() {      return {        userList: []      }    },    methods: {      getUserList() {        // TODO: 发送接口请求，获取用户列表        this.userList = [          { name: '张三', id: 1 },          { name: '李四', id: 2 },          { name: '王五', id: 3 },        ]      }    },    mounted() {      this.getUserList()    }  }</script>

在上述代码中，我们定义了一个名为getUserList的方法，用于向后端发送请求，获取符合搜索条件的用户列表，在mounted函数中，我们调用了getUserList方法，使得组件加载完成之后就会向后端发送请求获取用户列表。

2. 父子组件传值

在Vue中，父组件向子组件传递数据，可以通过props实现。我们可以将搜索框中用户输入的关键词通过props传递给子组件，以便子组件在发送请求时能够根据搜索的关键词进行搜索。

<template>  <div class="friend-add">    <div class="search-bar">      <!-- 在搜索框中添加v-model指令，将输入框中的值与父组件的keyword进行双向绑定 -->      <input type="text" placeholder="请输入好友名字或ID" v-model="keyword">      <button @click="search">搜索</button>    </div>    <user-list :keyword="keyword"></user-list>  </div></template><script>  import UserList from './UserList'    export default {    components: {      UserList    },    data() {      return {        keyword: ''      }    },    methods: {      search() {        // 点击搜索按钮时触发该函数，这里的search功能可以自行实现        this.$refs.userList.getUserList()      }    }  }</script>

在上述代码中，我们定义了一个名为keyword的data属性，用于存储搜索框中用户输入的关键词。另外，我们还引入了名为UserList的组件，使用props将keyword传递给子组件，在点击搜索按钮时调用子组件的getUserList方法，触发搜索功能。

在子组件中，我们需要先定义一个名为keyword的props：

<template>  <div class="user-list">    <ul>      <li v-for="(user, index) in userList" :key="index">        {{ user.name }}        <button @click="addFriend(user)">添加好友</button>      </li>    </ul>  </div></template><script>  export default {    props: {      keyword: String    },    data() {      return {        userList: []      }    },    methods: {      getUserList() {        // TODO：根据this.keyword向后端发送请求，获取用户列表      },      addFriend(user) {        // TODO：向后端发送请求，添加好友      }    }  }</script>

在上述代码中，我们定义了一个名为keyword的props，用于接收父组件传递过来的值。getUserList方法中，我们可以使用this.keyword获取到父组件传递过来的关键词进行搜索，addFriend方法用于向后端发送请求，添加好友。

3. Vue Router

在实现添加好友功能时，我们通常需要考虑到用户在添加好友之后，页面的跳转问题。为了更好的实现页面跳转的功能，我们需要使用Vue Router。

首先，在创建Vue项目时，需要选择使用Vue Router：

vue create my-project

在选择Options时，选中Manually select features，然后选择Router，安装即可。

接着，在添加好友成功之后，我们需要跳转到添加好友详情页。这个功能可以使用Vue Router实现：

<template>  <div>    <!-- 用户列表部分 -->    <div class="user-list">      <ul>        <li v-for="(user, index) in userList" :key="index">          {{ user.name }}          <button @click="addFriend(user)">添加好友</button>        </li>      </ul>    </div>  </div></template><script>  import { mapState } from 'vuex'    export default {    data() {      return {        userList: []      }    },    computed: {      ...mapState(['userInfo'])    },    methods: {      async addFriend(user) {        // 向后端发送请求，添加好友        await this.$Http.post('/add-friend', {id: user.id})                // 添加好友成功之后，跳转到好友详情页面        this.$router.push({ name: 'friendDetail', params: { friendId: user.id } })      }    }  }</script>

在上述代码中，我们首先引入了Vuex的mapState函数，通过该函数获取用户信息。接着，在addFriend方法中，我们向后端发送请求，添加好友，在添加好友成功之后，借助Vue Router实现跳转到好友详情页面。在跳转时，我们使用了路由的name和params属性，name属性表示页面的名称，params属性表示传递的参数。我们可以在src/router/index.js中定义该路由：

import Vue from 'vue'import VueRouter from 'vue-router'import FriendDetail from '@/views/FriendDetail.vue'Vue.use(VueRouter)const routes = [  {    path: '/friend-detail/:friendId',    name: 'friendDetail',    component: FriendDetail  }]const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL,  routes})export default router

在上述代码中，我们定义了一个名为friendDetail的路由，该路由的path属性表示访问该页面的路径，name属性表示路由的名称，component属性表示该路由所对应的组件。FriendDetail组件是用于展示好友详情页的组件，可以在该组件中根据传递过来的friendId获取好友信息。

关于“怎么使用Vue实现添加好友功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用Vue实现添加好友功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。