组件遇到的坑

本人在给组件传不同的值，让组件更新数据的时候。组件没有重新渲染。

代码片段

    <!-- 州聊天 -->
    <el-row v-if="roomId && serverIds && channel == 'area'"
            :gutter="20">
      <el-col v-for="server in serverIds"
              :key="server"
              :span="12">
        <div class="grid-content bg-purple">
          <p>Server Name：{{ serverList[server].name }}</p>
          <p>Server ID：{{ serverList[server].id }}</p>
          <RoomPost :key="roomId"
                    :room-id="roomId"
                    :server-id="server" />
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>

import { getServerList } from '@/api/server'
import { getRoomList, getRoomPostList } from '@/api/talk'
import WorldPost from '@/views/talk/worldPost'
import RoomPost from '@/views/talk/roomPost'
export default {
  components: {
    WorldPost,
    RoomPost
  },
  props: {
    serverId: ''
  },

解决方法：组件调用的时候 要用 :key="变量" 改变变量就可以重新渲染这个组件了。