uni-app页面间通信

╰半夏微凉° 2023-06-25 10:07 10阅读 0赞

# 关于页面间跳转传值 #

**1、使用页面路径传参**  
\*\*（1）***uni.navigateTo( ) / uni.redirectTo( )***  
参数与路径之间使用 ? 分割，参数键 与 参数值 用等号 = 相连，不同的参数用& 分割。  
\*\*（2）url 传参方式会有长度限制，太长字符串会传递失败！！！  
\*\*（3）跳转到另一页面，在onLoad 生命周期函数中 通过参数，可以获取到传递的参数

uni.navigateTo({ 
      url: "/pages/first/first_son?name=lxc&age=20",
    })

export default { 
    	onLoad(option) { 
    		console.log(option) // {name: "lxc", age: "20"}
    	},
    	methods:{ 
    		
    	}
    }

**2、页面通信**  
与vue一样使用uni.$emit( ) 触发自定义事件, uni . $on ( ) 监听自定义事件。  
uni . $emit 可以在任何页面触发，uni. $on 只能在全局（app.vue）中监听自定义事件。

**3、全局变量**  
(1) 通常创建一个common目录文件，新建global.js文件，文件名自定义，定义全局变量或函数  
(2) 缺点：每次都需要引入。

const URL = 'https://baidu.com'
    function isArray(param) { 
    	return Aarry.isArray(param) || param instanceof Array 
    }
    export default { 
    	URL,
    	isArray
    }

引入

**4、vue实例挂载**

将一些使用频率较高的常量或者方法，挂载至*Vue.prototype* 上, 这样每个Vue实例都会继承。

注意  
（1）这种方式只支持vue页面。  
（2）挂载至Vue实例上的属性和方法建议做一个标记，比如前边都加上$ 符号，便于维护。  
*在main.js中挂载属性 或 方法：*

Vue.prototype.$websiteUrl = 'https://bnaidu.com'

*在.vue组件中直接使用即可：*

**5、globalData**  
*定义：*  
globalData是一种比较简单的全局变量使用方式。  
在小程序中有globalData的概念，uni-app也实现了此功能，在App.vue可以定义globalData。  
*在App.vue中：*

// App.vue
    <script>
    export default { 
    	globalData: { 
    		text: 'lxc'
    	},
    	methods: { 
    		··· ···
    	}
    }
    </script>

*赋值：*

getApp().globalData.text = 'aliasName'

*取值：*

console.log(getApp().globalData.text) // 'aliasName'