uni-app，renderjs传参给组件

浅浅的花香味﹌ 2022-12-27 02:09 611阅读 0赞

使用this.$ownerInstance.callMethod(‘组件的方法名’,‘参数’)

<script module='sortable' lang="renderjs"  >
    	export default { 
    		data() { 
    			return { 
    				mySortable:null
    			};
    		},
    		mounted(){ 
    			if (window.Sortable) { 
    				this.init()
    			} else { 
    				// 动态引入类库
    				const script = document.createElement('script')
    				script.src = 'static/sortable.js'
    				script.onload = this.init
    				document.head.appendChild(script)
    			};
    		},
    		methods:{ 
    			init() { 
    				this.mySortable = new Sortable(document.getElementById('sort'),{ 
    					direction: 'horizontal',
    					scroll: false,
    					handle:'.sort',
    					ghostClass:'drag',
    					dragClass:'chosenClass',
    					onEnd:(e)=>{ 
    						this.$ownerInstance.callMethod('sortList',{ 
    							oldIndex:e.oldIndex,
    							newIndex:e.newIndex
    						})
    					}
    				});
    			},
    		}
    	}
    </script>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				showList:[],
    				hideList:[]
    			};
    		},
    		onLoad(){ 
    			let list = uni.getStorageSync('master_index_sortshow')
    			this.showList = list.filter(item=>{ 
    				return item.show == true
    			});
    			this.hideList = list.filter(item=>{ 
    				return item.show == false
    			});
    		},
    		onUnload(){ 
    			let list = [...this.showList,...this.hideList];
    			uni.setStorageSync('master_index_sortshow',list);
    			uni.$emit('setSortShow')
    		},
    		methods:{ 
    			delItem(index){ 
    				let item = this.showList[index];
    				item.show = false;
    				this.hideList.push(item);
    				this.showList.splice(index,1);
    			},
    			addItem(index){ 
    				let item = this.hideList[index];
    				item.show = true;
    				this.showList.push(item);
    				this.hideList.splice(index,1);
    			},
    			sortList({ oldIndex,newIndex}){ 
    				let temp = this.showList[oldIndex];
    				this.showList[oldIndex] = this.showList[newIndex];
    				this.showList[newIndex] = temp;
    			}
    		}
    	}
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，611人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 遍历组件传参

<audioWrapper @uploadRecord="uploadVoice(arguments,index)" @deleteVoice="deleteVoice

桃扇骨/ 2023年07月12日 09:28/ 0 赞/ 61 阅读

相关前端给后端传参

1、@RequestBody：参数是来自requestBody中，即请求体，（于处理非 Content-Type: application/x-www-form-urlenco

末蓝、/ 2023年06月21日 10:29/ 0 赞/ 63 阅读

相关 Vue实现父子组件传参

目录前言一、父传子二、子传父前言 vue的父子组件传值方式：父传子、子传父引用官网的一句话：父子组件的关系可以

墨蓝/ 2023年02月14日 10:23/ 0 赞/ 174 阅读

相关 18.组件通信父子传参

注意事项！！！：1. 绑定属性 2. 自定义事件特别注意getNum后不加括号，所有这样自定义事件不加括号特别的一个记住！！！ ; 3. 点击事件@click=“getNum(

我不是女神ヾ/ 2023年01月13日 10:20/ 0 赞/ 171 阅读

相关 uni-app，renderjs传参给组件

使用this.$ownerInstance.callMethod(‘组件的方法名’,‘参数’) <script module='sortable' lang="ren

浅浅的花香味﹌/ 2022年12月27日 02:09/ 0 赞/ 612 阅读

相关 Vue 兄弟组件传参

兄弟组件使用 eventBus 实现传值第一步：先创建js文件，位置随便放 import Vue from 'vue' export default ne

小咪咪/ 2022年12月22日 08:41/ 0 赞/ 217 阅读

相关 vue 子组件给父组件传参

vue 子组件给父组件传参代码中 n2 传参了，n1未传 <!DOCTYPE html> <html> <head> <meta

今天药忘吃喽~/ 2022年12月03日 01:41/ 0 赞/ 289 阅读

相关 VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] Vue是一个轻量级的渐进式框架，对于它的一些特性和优点

太过爱你忘了你带给我的痛/ 2022年03月29日 19:40/ 0 赞/ 561 阅读

相关 VUE：兄弟组件间传参

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1、定义一个中间 eventBus.js ，只有

刺骨的言语ヽ痛彻心扉/ 2022年03月26日 06:58/ 0 赞/ 904 阅读

相关 uniapp自定义组件-组件传参-父组件向子组件传参-子组件向父组件传参详细示例

前言：本篇文章主要讲的是自定义组件的使用与传参。在不同的页面重复使用到相同或者类似的模块，这里就可以使用到组件就省略了不少代码，不用每个页面去写相同的代码，直接去引用该组件就

向右看齐/ 2021年07月24日 21:05/ 0 赞/ 634 阅读