Vue3 响应式全局对象json 动态绑定界面一 （列表样式）

效果

 man.js  

定义 响应式全局对象 globalData

const globalData=reactive({
     
    extTelListData:  [
        {
            userExten: "1000",
            userName: "秦岚",
            callStatus:"通话"
        },
        {
            userExten: "1001",
            userName: "李冰冰",
            callStatus:"通话"
        },
        {
            userExten: "1002",
            userName: "刘亦菲",
            callStatus:"通话"
        },
        {
            userExten: "1003",
            userName: "娜然",
            callStatus:"通话"
        }
    ]
    ,
    missedCallData:"",
    currentUserTel:"",
})
app.provide('globalData', globalData);

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

//变更分机列表
function websocket_resMsg_extTelListData(msg){
    var msgExtTelListData= msg.substr(14);//去掉前14个字符     
    //将字符串转为json对象
    globalData.extTelListData=eval('('+msgExtTelListData+')');

    console.log('收到 分机列表'+ globalData.extTelListData);        
}

子组件 ExtTelListComponent.vue 中

html部分

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

v-on:click 单击事件 并 传参

<template>
<table class="table">
   <thead>
      <tr>
         <th>序号</th>
         <th>分机号</th>
         <th>分机名称</th>
         <th>分机状态</th>
         <th>操作</th>
      </tr>
   </thead>
   <tbody>    
         <tr v-for="(dataItem, index) in globalData.extTelListData" :key="index">
              <td>{{index+1}}</td>
              <td>{{dataItem.userExten}}</td>
              <td>{{dataItem.userName}}</td>
              <td>{{dataItem.callStatus}}</td>
              <td><button href="javascript:;" v-on:click="list_callouttel(dataItem.userExten)">外呼</button><button href="javascript:;">转接</button></td>
         </tr>
   </tbody>
</table>
</template>

javascript部分

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

export default {
  // 组件名称
  name: 'ExtTelListComponent',
  setup() {
    // 注入全局对象
    const globalData = inject('globalData');

    watch(() => globalData.extTelListData, (newValue) => {
            // 更新自己
            globalData.extTelListData=newValue;
            console.log("ExtTelListComponent watch "+globalData.extTelListData);    
            //console.log(globalData.extTelListData);    
    })

    return {
        globalData
    };

  },
  mounted() {

  },
  methods: {
    list_callouttel(callOutTel){
        alert("列表外呼 "+callOutTel);

    }

  }
}
</script>