标签界面的通信

标签界面通行方式：
window.postMessage
localStorage
WebSocket
BroadcastChannel
这里主要使用BroadcastChannel的方式

1. 主界面

// 创建一个 BroadcastChannel 渠道对象，name需要与接收界面的name一致
const channel = new BroadcastChannel('color')
const updateIndexColor = () => {
  // 随机生成一个颜色
  let color = '#' + Math.random().toString(16).slice(2, 8).padEnd(6, '0')
  // 随机生成一个包含数字，字母的字符串
  let str = Math.random().toString(36).slice(2)
  channel.postMessage({color, str})
}

2. 接收界面代码，监听消息改变

const color = ref(null)
const str = ref(null)
const channel = new BroadcastChannel('color')
channel.addEventListener('message', e => {
  color.value = e.data.color
  str.value = e.data.str
})