v-for打印出了对象成员(组件)的名字

前言

个人资料修改有两部分：“账号设置”和“个人资料”。分别写成两个组件，在同一页面切换即可。

代码记录

const currentTab = ref('SetAccount') // 这个是字符串，不是组件。

const tabs = { // 下面两个都是组件，而不是字符串
    SetAccount, // 账号设置
    EditProfile, // 个人资料
}

不给组件起名字，组件会有默认名，两个组件的名字分别是"EditProfile","SetAccount"

在部分，用v-for

<li
  :class="is-active:{currentTab===tab}" <!--**这里currentTab和tab都是字符串**-->
  v-for="(value,tab,index) in tabs
  @click=()=>{
    currentTab=tab
    console.log(value,name,index) 
  }
>
<!--上面console.log之后发现，value是组件实例的type？tab就是名字（一个字符串）,index就是0，1这些数字-->
 <a>{{ tab==='EditProfile' ? '个人资料' : '账号设置' }}</a> <!--这里是tab，而不是currentTab。之前错写成currentTab,结果点击“账号设置”，两个菜单都变成“账号设置”，反之同理。-->
</li>

TODO: 组件实例的type属性值和上面打印的value一样，双方的字段都一样，很有可能就是一回事，只是我没看过源码，不敢确定。（做个标记，回头确定）

以上写法是优化过的，之前是下面这样写的：

<li :class="{'is-active':currentTab==='EditProfile'}" @click="currentTab='EditProfile'">
  <a>个人资料</a>
</li>
<li :class="{'is-active':currentTab==='SetAccount'}" @click="currentTab='SetAccount'">
  <a>账号设置</a>
</li> -->

这么一看，优化之后不需要写那么多个组件的名字，没那么容易犯错。