<template>
<view>
未开启virtualHost
<button type="primary" @click="test">组件emit-click</button>
</view>
</template>
<script setup>
const emits = defineEmits(['click'])
function test() {
emits('click')
}
</script>
<style>
</style>
setting
- 发布：2024-06-27 11:50
- 更新：2024-08-19 14:49
- 阅读：518
产品分类： uniapp/小程序/字节跳动
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows11
第三方开发者工具版本号： 4.2.5
基础库版本号： 3.24.0.5
项目创建方式： CLI
CLI版本号： 3.0.0-alpha-4020120240618002
示例代码：
操作步骤：
<template>
<view>
emit事件在开启virtualHost时无法正确触发
<emit-demo-virtual @virtualClick="virtualClick"></emit-demo-virtual>
<emit-demo @click="test"></emit-demo>
</view>
</template>
<script setup>
import emitDemoVirtual from '../../components/emit-demo/emit-demo-virtual.vue';
function virtualClick() {
uni.showModal({
title: '提示',
content: 'virtualHost点击',
});
}
function test() {
uni.showModal({
title: '提示',
content: '常规点击',
});
}
</script>
<style>
</style>
<template>
<view>
emit事件在开启virtualHost时无法正确触发
<emit-demo-virtual @virtualClick="virtualClick"></emit-demo-virtual>
<emit-demo @click="test"></emit-demo>
</view>
</template>
<script setup>
import emitDemoVirtual from '../../components/emit-demo/emit-demo-virtual.vue';
function virtualClick() {
uni.showModal({
title: '提示',
content: 'virtualHost点击',
});
}
function test() {
uni.showModal({
title: '提示',
content: '常规点击',
});
}
</script>
<style>
</style>
预期结果：
click
upload
click
upload
实际结果：
无console
无console
bug描述：
vue3编译到抖音小程序开启virtualHost导致emit事件失效，还有之前inject失效的问题
抖音小程序：
vue2：inject、provide不生效；emit和watch没问题
vu3：inject、provide不生效；emit页面接收不到事件，watch导致页面卡死
最佳回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
更新：
之前我们在其他帖子交流过，这里做一个合并回答。你在 demo 中提到了两个问题，开启虚拟节点之后，抖音小程序有两个问题，一个是无法相应 emit，一个是 watch 会死循环。
第一个无法 emit 的问题
经过我实际验证和调试，目前在抖音、飞书系小程序平台使用 fragment 会收到比较大的限制。
https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/framework/custom-component/component-model-and-style/
当启用 virtualHost 时候自定义组件的事件等方法都会自动失效，目前没有更好的办法改造编译，从你提供的案例看，使用非 virtualHost 更适合你的开发习惯，你可以针对飞书、头条平台编写条件判断绕过单一平台的限制。
第二个问题已经修复，你可以参考下面方式来参考。
这个提交后续会发版生效，在发版之前，你可以通过下面方式来使用修复后的代码。
解压下面压缩包，替换到 HBuilderX 或者 CLI 的 node_moduels 的下面目录
HBuilderX 安装目录： /Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-toutiao/dist
cli node_moduels 目录 node_modules/@dcloudio/uni-mp-toutiao/dist
