uniapp传值集(1)

//页面间传值
//通过url传参 
传值:
 	"/pages/test/test?item=..." (url有长度限制,太长的字符串会传递失败)
 	//例如要传值三方openid 和多个字符串时
	// 可使用窗体通信、全局变量,或encodeURIComponent等多种方式解决,如下为encodeURIComponent示例。
 	'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))
 	
// 在test.vue页面接受参数
接收:
onLoad: function (option) {
	//一般传值
	const item = option.item
	//encodeURIComponent示例
    const item = JSON.parse(decodeURIComponent(option.item));
}


//窗体通信  (vue页面与nvue页面的通信传值)  

// 发送信息的页面
// $emit(eventName, data)  
uni.$emit('douyin', {  
    title: '我是title',  
    content: '我是content'  
});

// 接收信息的页面
使用此页面通讯时注意事项:要在页面卸载前,使用 uni.$off 移除事件监听器

// $on(eventName, callback)  
uni.$on('douyin', (data) => {  
    console.log('标题:' + data.title)
    console.log('内容:' + data.content)
})  
onUnload(){
// uni.$off('douyin')
destroyed() { //onUnload 里边 uni.$off 移除  //移除事件监听器  
// uni.$off('douyin')//点击返回 将当前时间取消  防止下次点及出现累加
}
//或者一次性的事件,直接使用 uni.$once 监听
uni.$once('douyin',function(data){		
	//do something		 
	//that.getCurrentClickVideo(data.id)
})

	
//全局通信 vuex
//nvue 不能使用外部变量eg:全局封装的api请求  ,但是nvue支持vuex 不支持直接引入store使用,可以使用mapState、mapGetters、mapMutations等辅助方法或者使用this.$store    ,
//定义store
const store = new Vuex.Store({  
    state: {  
        login: false
    },  
    mutations: {  
        login(state, provider) {  
          
        },  
        logout(state) {  
            state.login = false;   
        }  
    }  
}) 
//然后,需要在 main.js 挂载 Vuex
//import store from './store'  
//Vue.prototype.$store = store

//使用store
<script>  
    import {  
        mapState,  
        mapMutations  
    } from 'vuex';  
 
    export default {  
        computed: {  
            ...mapState(['avatarUrl', 'login', 'userName'])  
        },  
        computed: mapState({
		    count: 'count', // 第一种写法
		    sex: (state) => state.sex, // 第二种写法
		    from: function (state) { // 用普通函数this指向vue实例,要注意
		      return this.str + ':' + state.from
		    },
		    // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
		    // from: (state) => this.str + ':' + state.from
		    myCmpted: function () {
		      // 这里不需要state,测试一下computed的原有用法
		      return '测试' + this.str
		    }
		  }),     
		methods: {  
	            ...mapMutations(['logout'])  
	        }  
	    }  
</script>  
//全局通信   全局变量globalData
//uni-app 在app.vue文件export default里面定义globalData,在当前文件(app.vue)里面获取globalData需要用this.$options.globalData获取,其他文件则用getApp().globalData获取。
globalData: {  
   text: 'text'  
},  

js中操作globalData的方式如下: getApp().globalData.text = 'test'
### UniApp 组件间的方法 在 UniApp 中,组件间的可以通过多种方式实现。以下是几种常见的方法及其具体实现: #### 方法一:父子组件之间的 父组件向子组件通常通过 `props` 实现,而子组件向父组件则可以借助 `$emit`。 ##### 父组件向子组件 父组件定义一个数据项并通过属性绑定的方式将其递给子组件。 子组件通过 `props` 来接收这些数据并使用它们。 ```vue <!-- Parent.vue --> <template> <view> <child-component :message="parentMessage"></child-component> </view> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: '这是来自父组件的消息' }; } }; </script> ``` ```vue <!-- ChildComponent.vue --> <template> <view>{{ message }}</view> </template> <script> export default { props: ['message'] }; </script> ``` 上述代码展示了如何从父组件向子组件递消息[^1]。 ##### 子组件向父组件 子组件通过调用 `$emit` 将事件触发到父组件上,父组件监听此事件即可获取子组件的数据。 ```vue <!-- ChildComponent.vue --> <template> <button @click="sendDataToParent">发送数据到父组件</button> </template> <script> export default { methods: { sendDataToParent() { this.$emit('custom-event', '这是来自子组件的数据'); } } }; </script> ``` ```vue <!-- Parent.vue --> <template> <view> <child-component @custom-event="handleCustomEvent"></child-component> <text>接收到的数据:{{ receivedData }}</text> </view> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { receivedData: '' }; }, methods: { handleCustomEvent(data) { this.receivedData = data; } } }; </script> ``` 以上代码实现了子组件向父组件的单向通信[^1]。 --- #### 方法二:页面跳转时携带参数 当需要在一个页面导航至另一个页面时,可以通过 URL 参数的形式递数据。 ```javascript // 跳转前设置参数 uni.navigateTo({ url: '/pages/targetPage/targetPage?param=value' }); ``` 目标页面可以在其生命周期函数中解析这些参数: ```javascript // targetPage.js onLoad(options) { console.log(options.param); // 输出 value } ``` 这种方式适用于简单的跨页面场景[^2]。 --- #### 方法三:全局状态管理 (Vuex 或 Pinia) 对于更复杂的应用程序结构,推荐使用 Vuex 或 Pinia 进行全局状态管理。这允许任何地方都可以访问共享的状态变量。 安装 Vuex 后,在 store 文件夹下创建 state 和 mutations 定义如下: ```javascript // store/index.js const state = { sharedValue: '初始', }; const mutations = { updateSharedValue(state, newValue) { state.sharedValue = newValue; }, }; export default { state, mutations, }; ``` 然后在任意 Vue 组件中修改或读取这个: ```javascript this.$store.commit('updateSharedValue', '新'); // 修改 console.log(this.$store.state.sharedValue); // 获取 ``` 这种方法适合于多处都需要同步更新某些特定数据的情况。 --- ### 总结 UniApp 提供了灵活的方式来处理不同层次上的组件交互需求——无论是基础层面还是高级应用架构设计都得到了良好支持。开发者可以根据实际项目的需求选择最合适的方案来完成所需功能开发工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值