当前位置: 首页 > 工具软件 > vue-chat > 使用案例 >

nvue和vue之间的通讯

戎高爽
2023-12-01

nvue和Vue之间的方法

第一种方法:
1、在Vue页面中使用plus.webview.postMessageToUniNView(data,nvueId) 发送信息,data为json格式,(只支持字符串),nvueId是nvue所在webview的id,viewId可以使用$getAppWebview()获取
2、在nvue的页面上使用globalEvent模块监听plusMassage事件

上代码

vue页面中

<template>
	<view>
		<button @click="buxiu">点击修改数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			buxiu(e){
				let pages = getCurrentPages();
				let index = pages[0].$getAppWebview();
				plus.webview.postMessageToUniNView ({
					gg:'buxiu'
				},index.id)
			}
		}
	}
</script>

nvue页面中

<template>
	<div>
	 	<text class="text">{{textContent}}</text>
	</div>
</template>  
<script>
	export default {
		data(){
			return{
				textContent:''
			}
		},
		created() {
			const plus = weex.requireModule('globalEvent');
			plus.addEventListener('plusMessage',e =>{
				this.textContent = e.data.gg
			})
		}
	}
</script>

第二种方法:
1、发送页面使用uni. e m i t ( ) 2 、 接 受 页 面 使 用 u n i . emit() 2、接受页面使用uni. emit()2使uni.on进行接收

上代码

在发送的页面上

uni.$emit('ceshi', {
    title: '测试标题',  
    content: '测试内容'  
});

在接收的页面上

uni.$on('ceshi', (data) => {
    console.log('标题:' + data.title)
    console.log('内容:' + data.content)
})
 类似资料: