uniapp使用renderjs时，视图层和逻辑层之间互相通信

ღ张明宇࿐

已于 2023-06-02 20:48:47 修改

阅读量2.5k

点赞数 2

文章标签： uni-app javascript

于 2023-06-01 00:02:01 首次发布

本文链接：https://blog.csdn.net/zmx781284440/article/details/130979313

版权

此文章是补充上一篇文章《uniapp app实现多个容器中菜单拖动交换和排序》的知识点。

拖动排序需要操作dom用到了renderjs，肯定要发送请求将数据交给后端保存。而在renderjs 中不可以使用 uni 相关接口（如：uni.request），这时就需要视图层和逻辑层通讯。

如果有什么问题，可以私信我。如果你的公司在招人，需要前端工程师，也可以私信我。

<template>
    <!-- 逻辑层向视图层通讯 在view中自定义属性传值  chang去监听自定义属性  Sortable为renderjs的module -->
	<view class="work-container" :data="menuList" :change:data="Sortable.queryMenuList">
		<view class="work-title">工作台</view>
		<view class="work-menu-box">
			<view class="work-menu" v-for="(item,index) of menuList" :key="index">
				<view class="menu-title">
					{{item.meta.title}}
				</view>
				<view class="menu-grid-body">
					<uni-grid :className="'grid'+index" :data-id="index" :column="4" :showBorder="false"
						@change="(e)=>{changeGrid(e,index)}" :highlight="false">
						<uni-grid-item :index="i" v-for="(el,i) of item.children" :key="i" :data-item="JSON.stringify(el)">
							<view class="menu-grid-item-box">
								<view>
									<image class="icon" :src="el.meta.icon" mode="aspectFit"></image>
									<u-badge :show="el.meta.title == '待办任务'" absolute max="999" :value="total" :offset="[0,10]"></u-badge>
								</view>
								<text class="text u-line-1">{{el.meta.title}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
		</view>
		<u-toast ref="toast"></u-toast>
	</view>
</template>
<script>
export default{
    methods:{
        onMessage(data){
            console.log(data,'视图层向逻辑层发送的数据,注意是个对象');
        }
    }
}
</script>
<script module="Sortable" lang="renderjs">
export default{
    methods:{
        // 逻辑层向视图层主动传值  需要在view元素上定义方法
        queryMenuList(data){
            console.log('逻辑层向视图层主动传值')
        },
        // 逻辑层向视图层传值
        postMessage(){
            this.$ownerInstance.callMethod('onMessage',{data:'需要发送的数据'})
        }
    }
}
</script>