uni-app subNVue 原生子窗体简单使用案例（app端）

开头先放一些需要大概了解的官方文档链接地址

1、新建一个 uni-app 项目（使用 Hbuilder X）

2、项目结构如下（在 pages 目录下的 index 目录中，新建一个 subNVue 目录，在此目录中新建一个 hello.nvue 的文件）

3、hello.nvue 内容如下：

<template>
    <div>
        <text class="hello">{{ content }}</text>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 父窗体传递过来的内容
                content: ''
            }
        },
        created() {
            const vm = this;
            // 接收信息的页面
            uni.$on('page-popup', (data) => {
                switch( data.type ){
                    case 'one':
                        vm.content = data.content;
                    break;
                    case 'two':
                        vm.content = data.content;
                    break;
                    // .... 
                }
            });
        },
        beforeDestroy() {
            
        },
        methods: {

        }
    }
</script>

<style>
    .hello {
        font-size: 30px;
        color: red;
    }
</style>

View Code

4、配置 pages.json 文件

5、index.vue 的内容如下

<template>
    <view class="container">
        <view style="background-color: #0A98D5;
                     text-align: center;
                     line-height: 600rpx;
                     height: 600rpx;
                     margin-bottom: 20rpx;">
            Hello,word
        </view>
        <button @click="openWindows('one')">点击打开子窗体1</button>
        <button @click="openWindows('two')">点击打开子窗体2</button>
        <button @click="openWindows('three')">点击打开子窗体3</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            openWindows() {
                uni.getSubNVueById('popup').show();
                const subNVue = uni.getSubNVueById('popup');
                subNVue.show('',250);
            }
        }
    }
</script>

<style>
    .container {
        padding: 20px;
        font-size: 14px;
        line-height: 24px;
    }
</style>