uniapp 中renderjs传值问题

需要自己自定义一个按钮,点击按钮后才能获取到值。renderjs 代码页面

<template>
	<view class="map-wrap">
		<view id="map-box">

		</view>
		<view  @click="mapbox.emitData" style="position: absolute; bottom: 50px;left: 25%; z-index: 999;display: none;">
							确认
		</view>
	</view>
</template>

//renderjs 模式
<script>
	export default {
		data() {
			return {
				msg: '',
			};
		},
		methods: {
			// 触发逻辑层出入renderjs数据改变
			// 接收renderjs发回的数据
			receiveRenderData(val) {
				console.log(val)
				this.$eventHub.$emit('dot', val);
				uni.navigateBack({
					delta: 1
				})
			}
		}
	};
</script>
<script module="mapbox" lang="renderjs">
	export default {
		data: {
			return () {
				dot: 123
			}
		},
		methods: {
              //点击函数
			emitData(e, ownerVm) {
				ownerVm.callMethod('receiveRenderData', this.dot)
			}
		}
	}
</script>

主页面代码,在onload里面接收renderjs页面的值

		onLoad() {
			var t = this;
			this.$eventHub.$on('dot', data => {
                 console.log(data);
				//将数组转为字符串
				//t.dot = t.getString(data)
				//字符串转数组
				//console.log(eval(t.dot))
			});
		},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uniapp项目,可以使用vuex来进行组件之间的传值。使用vuex进行传值的好处是可以在全局范围内管理和共享数据。在使用vuex传值之前,需要先进行vuex的配置和初始化。 首先,在项目的src目录下创建一个store文件夹,然后在store文件夹下创建一个index.js文件。在index.js文件,需要引入并使用Vue和Vuex,并创建一个新的Vuex.Store实例。 引用提到的uni-app项目,可以在创建的store实例定义state、mutations和actions。state用于存储数据,mutations用于修改state的数据,而actions则用于处理异步操作。 在需要传值的组件,可以通过this.$store.state来获取state的数据,通过this.$store.commit来触发mutations的方法来修改state的数据。如果需要进行异步操作,可以使用this.$store.dispatch来触发actions的方法。 另外,如果需要在组件之间传递多层嵌套的值,可以使用provide和inject来实现。在祖组件使用provide来提供数据,然后在孙组件使用inject来接收数据。这样就可以在祖孙组件之间进行传值。 总结起来,uniapp使用vuex传值的步骤如下: 1. 配置vuex,创建store实例。 2. 在state定义需要共享的数据。 3. 在mutations定义修改state的方法。 4. 在actions处理异步操作。 5. 在需要传值的组件使用this.$store.state获取数据,使用this.$store.commit来触发mutations的方法来修改数据。 6. 如果需要在组件之间传递多层嵌套的值,可以使用provide和inject来实现。 需要注意的是,使用vuex传值时,要注意及时销毁事件监听或者仅仅在需要监听事件时注册事件。可以在页面的onLoad注册监听,在onUnload移除监听,或者使用uni.$once一次性的事件监听。另外,在使用uni.$on之前,要确保uni.$on已经定义完成,才能接收到uni.$emit传递的数据。 这样,你就可以在uniapp项目使用vuex来进行组件之间的传值了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)](https://blog.csdn.net/weixin_45811256/article/details/127604610)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [基于vue的教育商城的设计与实现](https://download.csdn.net/download/weixin_44269229/11578623)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凉臣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值