Vue3 响应式全局对象json 动态绑定界面三 （Div块样式 字符串叠加）

效果

 man.js  

定义 响应式全局对象 globalData

//全局对象
const globalData=reactive({
    missedCallData:"",
    currentUserTel:"",
})
app.provide('globalData', globalData);

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

//改变全局变量 globalData.missedCallData
function websocket_resMsg_missedCallData(msg){
    var msgMissedCallData= msg.substr(14);//去掉前14个字符
    if(globalData.missedCallData.length>500){
        globalData.missedCallData="";//清空
    }
    //将字符串 累加
    globalData.missedCallData=globalData.missedCallData+" "+msgMissedCallData;

    console.log('收到 未接来电 '+ globalData.missedCallData);
    //}
        
  }

子组件 RightSideComponent.vue 中

html部分

<li class="">
    <a href="javascript:;" class="IndRea flexC Huans"><i></i><p>来电队列 [ 0 ]</p></a>
    <div class="IndReN">
          {{ globalData.missedCallData }}
    </div>
</li>

javascript部分

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

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

        return { 
            globalData 
        };
    }
}
</script>