Vue3 让外部JS与Vue内部实现互相传值

步骤

1. 定义自定义事件，并派发事件

在 index.html 文件定义单独 标签内

	// index.html
	<script>
		// 使用自定义事件派发自定义事件
		function postMsg(msg){
			document.dispatchEvent(new CustomEvent('PostMsgEvent', { detail: { message: msg } }))
		}
	</script>
	
	// 示例: 外部执行 派发事件操作
	// 例如 在控制台输入
	postMsg('你好, 中国!')

2. 进行监听 与 移除监听

在 Vue 组件中, 生命周期 ( onMounted 与 onUnmounted ) 函数内进行监听 与 移除监听

// a.vue

	onMounted(() => {
		// 绑定监听
		document.addEventListener('PostMsgEvent', postHandle);
	})
	
	// 未避免在多组件中使用, 造成重复监听, 在页面卸载时移除监听
	onUnmounted(() => {
		// 移除监听
		document.removeEventListener('PostMsgEvent', postHandle);
	})

// b.vue

	onMounted(() => {
		// 绑定监听
		document.addEventListener('PostMsgEvent', postHandle);
	})
	
	// 未避免在多组件中使用, 造成重复监听, 在页面卸载时移除监听
	onUnmounted(() => {
		// 移除监听
		document.removeEventListener('PostMsgEvent', postHandle);
	})

3. 在 a.vue 与 b.vue 中定义 消息处理函数

	const postHandle = (event) => {
		console.log('当前页面获取消息:', event.detail.message);
	}