前端论坛项目(九)------如何实现UserProfileInfo里面的关注按钮

目录

前言

如何实现button标签的上图所示的变换？

改进后的代码

现在怎么通过鼠标的点击来控制显示相关的按钮呢？

如何绑定并且触发相关的事件呢？

如何在子组件中修改父组件的相关属性呢？

---

前言

像这种情况，我们没有关注，关注按钮显示的就是未关注。

鼠标点击关注以后，相关的按钮就会显示已关注。

  

如何实现button标签的上图所示的变换？

方法：在相关的标签里面使用v-if的属性，只有满足v-if后面的条件这个标签才会显示出来。不满足就不会显示出来。

改进后的代码

先看看改进后的效果吧

已经可以通过后台is_followed的数据的true和false显示关注按钮和取消关注按钮了。

改进后的代码部分如下

<template>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-3">
                    <img src="https://cdn.acwing.com/media/user/profile/photo/200349_lg_080b3b050d.jpg"
                        class="img-fluid" alt="">
                </div>
                <div class="col-9 ">
                    <div class="username">{{ fullName }}</div>
                    <div class="fans">粉丝：{{ user.followerCount }}</div>
                    <button v-if="user.is_followed" type="button" class="btn btn-secondary btn-sm">+取消关注</button>
                    <button v-if="!user.is_followed" type="button" class="btn btn-secondary btn-sm">+关注</button>
                </div>
            </div>
        </div>
    </div>
</template>

现在怎么通过鼠标的点击来控制显示相关的按钮呢？

如何绑定并且触发相关的事件呢？

在特定的事件上绑定相关要触发的函数：

v-on:click或@click属性：绑定事件

例子：

<button @click="unfollow" v-if="user.is_followed" type="button"

这里就将click事件中绑定unfollow函数

子组件中触发父组件中绑定的函数：

context.emit()：触发父组件中绑定了相关函数的事件

如何在子组件中修改父组件的相关属性呢？

首先，在父组件中定义修改相关属性的函数，然后绑定在特定的事件之中。

然后，在子组件中触发父组件里面绑定函数的事件(context.emit())来实现这一点。那么现在问题来了，我们如何触发父组件里面绑定的函数呢。 

方法：context.emit()：触发父组件绑定的函数

相关的代码如下，

   setup(props, context) {
        let fullName = computed(() => props.user.firstName + " " + props.user.lastName);

        const follow = () => {
            context.emit('follow123');
        }
        const unfollow = () => {
            context.emit('unfollow123');
        }

        return {
            fullName,
            follow,
            unfollow,
        }
    }

<template>
  <ContentBase>
    <div class="row">
      <div class="col-3">
        <UserProfileInfo @follow123="follow" @unfollow123="unfollow" :user="user" />
        <!-- 表示的是 -->
      </div>
      <div class="col-9">
        <UserProfilePosts />

      </div>
    </div>
  </ContentBase>
</template>

<script>
import { reactive } from 'vue';
import ContentBase from '../components/ContentBase';
import UserProfileInfo from '../components/UserProfileInfo';
import UserProfilePosts from '../components/UserProfilePosts';

export default {
  name: "UserListView",
  components: {
    ContentBase,
    UserProfileInfo,
    UserProfilePosts
  },
  setup() {
    const user = reactive({
      id: 1,
      username: "小仙女",
      lastName: "仙女",
      firstName: "小",
      followerCount: 0,
      is_followed: false,
    });

    const follow = () => {
      if (user.is_followed) return;
      user.followerCount++;
      user.is_followed = true;
    }

    const unfollow = () => {
      if (!user.is_followed) return;
      user.followerCount--;
      user.is_followed = false;
    }

    return {
      user,
      follow,
      unfollow,
    }
  }



}
</script>

<style scoped>
</style>