[JavaScript知识库]uniapp 原生子窗体nvue的使用，及vue与nvue页面间的通讯

效果图：

?点击后显示

?再次点击后：

?注意：pages.json中配置在那个vue页面使用元素子窗体就配置在这里，子窗体最多不超过三个

{
            "path" : "pages/videoProblem/test2/test2",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
				"app-plus" : {
				    "subNVues" : [{
				            "id" : "test", // 唯一标识  
				            "path" : "subNvue/test", // 页面路径 
				            "type" : "popup", //type值为 popup或navigationBar时 position 和
				            "style" : {
				                "position" : "absolute",
								"dock":"left"
								
				            }
				        }
				    ]
				}
            } 
        }

?test2.vue 页面

<template>
	<view>
		<view class="page-body" >
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
					<cover-view @click="show()">点击会显示原生子窗体</cover-view>
					<cover-view>子窗体返回的值为：{{msg}} </cover-view>
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subNVue: '',
				msg: '',
				
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					// iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					// iconPath: '../../../static/location.png'
				}]
			}

		},
		onReady() {
			this.init() // 注意获取原生子窗体的位置 需放在onReady生命周期中调用

		},
		onLoad() {
			uni.$on('sendData',res=>{
				let {msg,isShow} = res
				this.msg = msg
				console.log(isShow)
				if(!isShow) {
					console.log(this.subNVue)
					// 关闭 nvue 子窗体  
					this.subNVue.hide('fade-out', 300)
				}
			})
		},
		methods: {
			init() {
				// 通过 id 获取 nvue 子窗体
				this.subNVue = uni.getSubNVueById('test')
				console.log(this.subNVue)
			},
			show() {
				// console.log(1111)
				// 打开 nvue 子窗体
				this.subNVue.show('slide-in-top', 300, () => {
					console.log('subNVue 原生子窗体显示成功');
				})
			}
		}
	}
</script>

<style>

</style>

?test.nvue页面

<template>
	<div class="test_box">
		<text> 我是test.nvue原生子窗体</text>
		<button type="succuess" @click="send">点击向test2.vue发送值</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods:{
			send() {
				uni.$emit('sendData',{msg:'我是子窗体的值test.nvue',isShow:false})
				
			}
		}
	}
</script>

<style scoped>
.test_box {
	/* display: flex; */
	height:400upx;
	width:400upx;
	background-color: pink;
}
</style>