怎么做出这一块的组件 ？
1-1 新建channel.vue 1-2 修改一下
<template> <div class="channel"> <Item :isActive="isActive" @active="$emit('active')"> <div class="inner"> <span class="name">动漫</span> <span class="number">226</span> </div> </Item> </div> </template> <script> import Item from "./item"; export default { props: { isActive: { type: Boolean, //约束该属性的类型是boolean // required: true, //约束必须填写的属性 default: false, }, }, components: { Item, }, }; </script> <style scoped> .channel { width: 100%; height: 40px; line-height: 40px; } .inner { padding: 0 20px; } .name { font-size: 14px; color: #212121; } .number { font-size: 12px; color: #999; margin-left: 8px; } .name, .number { float: left; } </style>1-3 在App.vue import 并且注册使用 1-4 npm run serve打开 1-5 需要思考 动漫和数字不能写死 怎么写？ channel.vue App.vue
2-1 新建ChannelList.vue
<template> <div class="channel-list"></div> </template> <script> import Channel from "./Channel"; export default { // 注册 channel components: { Channel, }, }; </script> <style> </style>2-2 App.vue 更改一下这个内容
<template> <div> <div style="width: 250px"> <TitleMenu :isActive="select" @active="select = true"> <template v-slot:title> <!-- 这里面写的是插槽名字为title的内容 --> 发现频道 </template> <template v-slot:icon> > </template> </TitleMenu> <ChannelList /> </div> </div> </template> <script> // 导入 item.vue import TitleMenu from "./components/TitleMenu"; import ChannelList from "./components/ChannelList"; export default { // 注册 components: { TitleMenu, ChannelList, }, data() { return { select: false, }; }, }; </script>2-3 怎么将我们得到的多个数组数据导入到这里 2-4 ChannelList.vue
<template> <div class="channel-list"> <div v-for="item in channels" :key="item.id" class="item"> <Channel :data="item" /> </div> </div> </template> <script> import Channel from "./Channel"; export default { // 注册 channel components: { Channel, }, data() { return { channels: [ { id: 0, name: "全部", channel_count: "2567" }, { id: 1, name: "动漫", channel_count: "226" }, ], }; }, }; </script> <style> </style>这样界面会生成
我们需要注意几个问题 那么接下来我们稍微改一下样式 使得结构改一点 2-5 看似我们的目的已经达到了 ？ 我们只需要传入多个目标数组就可以达到目的 ？ 但是我们的数据都是假数据 面对真实的数据怎么操作？ 你有没有想过这个问题 ？ 先看一个新东西 2-6 channelList.vue
<template> <div class="channel-list"> <div v-for="item in channels" :key="item.id" class="item"> <Channel :data="item" /> </div> </div> </template> <script> import Channel from "./Channel"; // 调用 channel.js 拿到b站的数据 import channelServe from "../../services/channel"; export default { // 注册 channel components: { Channel, }, data() { return { channels: [], }; }, // 这个地方改成异步加载 async created() { // 等待拿到b站数据 并且赋给 channels this.channels = await channelServe.getChannels(); }, }; </script> <style> .channel-list { overflow: hidden; } .item { float: left; width: 50%; } </style>2-7 非常nice 的可以得到很多的数据 2-7 看似目的达到了 也很完美了 但是我发现实际的b站没有热门这个选项 怎么做一个数组筛选 把这一项去掉 ？ 2-8
看起来 很完美啦 但是 我们学到这里能不能 再优化一下 ？ 2-9 下一个问题 ChannelList 怎么知道是被选中的状态？ 它现在不知道 怎么解决？ 我们尝试按照这个思路实现一下 传个 0 全部被选中 传个1 动漫被选中 2-10 下一个问题 ，我切换又怎么办？ 这样相当于写的确定了 我想改动怎么弄 ？ 1） 我需要在 channelList.vue 将事件向上抛给App.vue 2) 怎么实现这个问题 ？
当前目的已经达到了 点击那个 就会选中 默认是热门（在发现频道内） 不过这个整体的思想才是最要紧的 实现效果只是附属的事情
当前实现的效果是这样的
