Vue3 响应式全局对象json 动态绑定界面四 （Div块样式 Json数据绑定）

效果

man.js  

定义 响应式全局对象 globalData

//全局对象
const globalData=reactive({
    extTelTalkData:  [
        {
            userExten: "1000",
            userName: "刘亦菲",
            callStatus:"通话"
        },
        {
            userExten: "1001",
            userName: "娜然",
            callStatus:"通话"
        }
    ]
    ,
    missedCallData:"",
    currentUserTel:"",
})
app.provide('globalData', globalData);
 

在main.js的函数中 改变 extTelTalkData 的值 从而改变界面列表

//分机 通话列表
function websocket_resMsg_extTelTalk(msg){
    var msgExtTelTalk= msg.substr(10);
    //globalData.extTelMonitorData=JSON.parse(msgExtTelStatus);
    //将字符串转为json对象
    globalData.extTelTalkData=eval('('+msgExtTelTalk+')');

    console.log('收到分机 通话列表 '+ globalData.extTelTalkData);
    //}
        
}

子组件 ExtTelListComponent.vue 中

html部分

v-for  遍历 Json数组，赋值显示

<li class="">
    <a href="javascript:;" class="IndRea flexC Huans"><i></i><p>当前通话 [ {{ globalData.extTelTalkData.length }} ]</p></a>
    <div class="IndReN">
         <el-row :gutter="74"  v-for="(dataItem, index) in globalData.extTelTalkData" :key="index">
         　　<el-col :span="8">  
                        
             　　{{dataItem.userExten}} {{dataItem.userName}}  {{dataItem.callStatus}} 
                                       
         　　</el-col>
         　　<br>
         </el-row>      

  </div>
</li>

javascript部分

<script>
// 在子组件中注入全局对象
import { inject, watch } from 'vue'

export default {
  // 组件名称
  name: 'RightSideComponent',
  setup() {
        // 注入全局对象
        const globalData = inject('globalData');
        //监听全局对象的变化
        watch(() => globalData.extTelTalkData, (newValue) => {
            // 更新自己的状态
            globalData.extTelTalkData=newValue;
                        
            console.log("RightSideComponent watch "+globalData.extTelTalkData.length);    
 
        })
        return { 
            globalData 
        };
    }
}
</script>