架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

vue学习笔记:组件key属性的妙用

架构师小跟班 2020-06-03 前端别闹
问题背景最近在对接海康摄像头,需求是在前端页面(vue.js)中显示海康摄像头的监控画面。摄像头有多个,点击左侧相机列表名称,切换显示不同摄像头监控画面。页面如下:前端代码<templ

问题背景

最近在对接海康摄像头,需求是在前端页面(vue.js)中显示海康摄像头的监控画面。摄像头有多个,点击左侧相机列表名称,切换显示不同摄像头监控画面。页面如下:

前端代码

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--机构数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="equipName"
            placeholder="请输入设备名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="equipOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>

      </el-col>
      <el-col :span="20" :xs="24">
        <object type='application/x-vlc-plugin' id='vlc' events='True' width="1300px" height="750px"
                pluginspage="http://www.videolan.org"
                codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
          <param name='mrl' :value='equipRtsp' :key="equipId"/>
          <param name='volume' value='30'/>
          <param name='autoplay' value='false'/>
          <param name='loop' value='false'/>
          <param name='fullscreen' value='false'/>
        </object>
      </el-col>
    </el-row>
  </div>

</template>

重点是红框里的代码,

如果不加,当切换摄像头时,虽然equipRtsp(流地址)已经改变,但是右侧监控画面并没有改变。

key具体原理,参考本站其他博客。



文章评论