一、前置知识
在开始介绍添加好友功能之前，我们需要了解以下内容：
使用vue cli创建项目；vue组件的基本概念和使用方法；父子组件传值的方法；vue router的基本概念和使用方法。二、设计页面
在设计添加好友的页面时，我们需要考虑页面的布局和功能。通常，添加好友功能需要包含以下内容：
搜索框：用户可以在搜索框中输入好友的名字或者id，进行搜索；用户列表：根据搜索结果显示用户列表；添加好友按钮：用户可以通过点击添加好友按钮，向搜索结果中的用户发送好友请求。根据以上内容，我们可以设计以下页面布局：
<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>
三、实现功能
在设计好页面布局之后，我们需要实现添加好友的功能。以下是具体的实现方法：
获取用户列表用户在搜索框中输入关键词之后，我们需要通过接口请求，获取到符合搜索条件的用户列表。在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方法，使得组件加载完成之后就会向后端发送请求获取用户列表。
父子组件传值在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方法用于向后端发送请求，添加好友。
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实现添加好友功能的详细内容。