1***@qq.com
1***@qq.com
  • 发布:2024-01-04 14:03
  • 更新:2024-01-04 16:45
  • 阅读:225

【报Bug】vue3在子组件中通过$parent调用父组件方法时H5和小程序有差异

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX版本号: 3.99

浏览器平台: Chrome

浏览器版本: 120.0.6099.130

项目创建方式: CLI

CLI版本号: 3.0.0-3090820231124001

示例代码:

父组件:

<template>  
    <view class="content">  
        <aaaaa>  
            <template v-slot:default>  
                <view class="b">111111111</view>  
            </template>  
        </aaaaa>  
    </view>  
</template>  

<script>  
    import aaaaa from './aaaaa.vue'  

    export default {  
        components: {  
            aaaaa,  
        },  
        data() {  
            return { }  
        },  
        onLoad() {  
        },  
        methods: {  
            console() {  
                console.log(1111111111111);  
            },  
        },  
    }  
</script>  

<style></style>

子组件:

<template>  
    <view class="aaaaaa">  
        <slot name="default"></slot>  
    </view>  
</template>  

<script>  
    export default {  
        options: {  
            styleIsolation: 'shared',  
            virtualHost: true,  
        },  
        externalClasses: ['class'],  
        data() {  
            return { }  
        },  
        mounted() {  
            this.$parent.console();    //微信小程序调用成功,H5报this.$parent.console is not a function  
            this.$parent.$parent.console();    //H5调用成功  
        },  
        methods: { },  
    }  
</script>  

<style></style>

操作步骤:

1

预期结果:

this.$parent.console(); 各端调用成功

实际结果:

this.$parent.console(); //微信小程序调用成功,H5报this.$parent.console is not a function
this.$parent.$parent.console(); //H5调用成功

bug描述:

当我在子组件使用this.$parent调用父组件的方法时,H5和小程序有差异。

h5:
this.$parent.$parent.xxxx()

微信小程序:
this.$parent.xxxx()

2024-01-04 14:03 负责人:无 分享
已邀请:
YUANRJ

YUANRJ

参考文档注意事项

H5端 view、text 等内置标签是以 Vue 组件方式实现,$parent 会获取这些到内置组件,导致的问题是 this.$parent 与其他平台不一致,解决方式是使用 this.$parent.$parent 获取或自定义组件根节点由 view 改为 div。

  • 1***@qq.com (作者)

    子组件:


    <template>    
    <div class="aaaaaa">
    <slot name="default"></slot>
    </div>
    </template>

    <script>
    export default {
    options: {
    styleIsolation: 'shared',
    virtualHost: true,
    },
    externalClasses: ['class'],
    data() {
    return { }
    },
    mounted() {
    this.$parent.console(); //微信小程序调用成功,H5报this.$parent.console is not a function
    this.$parent.$parent.console(); //H5调用成功
    },
    methods: { },
    }
    </script>

    <style></style>

    问题还是存在的

    2024-01-04 16:54

要回复问题请先登录注册