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点击事件 需要填写idtitle: '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} = resthis.msg = msgconsole.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>