聊聊uniapp的傳遞方法

Uniapp是一個提供了跨平台開發的解決方案，它可以讓我們一次編寫程式碼，就可以在多個平台上運行，例如iOS、Android和Web等。對於開發者來說，這是一件特別好的事情，因為節省了很多時間和精力。在Uniapp的開發中，我們經常需要在頁面之間傳遞資料和方法，那麼本文將為大家介紹一些傳遞方法。

1.使用Vuex來傳遞數據

在Uniapp中，我們可以使用Vuex來共享數據，Vuex是一個專為Vue.js應用程式開發的狀態管理模式，它可以管理全域的資料狀態。我們可以在store中定義state、mutations、actions、getters等來進行資料的傳遞。在各個元件中，如果需要取得數據，我們只需要使用mapState、mapMutations、mapActions、mapGetters等函數即可輕鬆取得和修改數據。

在store.js檔案中定義state：

state:{
    count:0
},
mutations:{
    increment(state){//自增
        state.count++
    },
    decrement(state){//自减
        state.count--
    }
},
actions:{
    asyncIncrement({commit}){//异步自增
        setTimeout(()=>{
            commit('increment')
        },1000)
    },
    asyncDecrement({commit}){//异步自减
        setTimeout(()=>{
            commit('decrement')
        },1000)
    }
}

在使用頁面中取得並修改資料：

import {mapState,mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
        }
    },
    computed:{
        ...mapState([
            'count'
          ])
    },
    methods:{
        ...mapMutations([
            'increment',
            'decrement'
        ]),
        ...mapActions([
            'asyncIncrement',
            'asyncDecrement'
        ])
    }
}

2.使用uni.navigateBack參數傳遞

#在頁面跳轉的時候，我們可以使用uni.navigateBack方法中的參數object去傳遞數據，這個參數是一個Object類型的對象，可以在下一個頁面onLoad的時候取得到。

在發送頁面：

uni.navigateBack({
    delta:1,
    success(res){
        console.log('回跳成功')
    },
    fail(res){
        console.log('回跳失败')
    },
    complete(res){
        console.log('回跳完成')
    },
    animation:true,//使用动画返回
    aniationDuration:2000,//动画持续时间
    aniationType:'pop-out',//动画类型
    title:'返回页面',//导航栏标题
    formData:{//携带的参数
        id:1,
        name:'张三'
    }
})

在接收頁面：

onLoad:function(options){
    console.log(options)
    if(options.formData){
        this.formData = options.formData
    }
}

3.使用自訂事件進行傳遞

在Uniapp中，我們可以使用$ emit觸發自訂事件，並且可以在元件中使用$on監聽這些事件。在父元件中透過$emit觸發事件，父元件中呼叫子元件時會把子元件物件透過$emit的方式傳遞，然後在子元件中監聽並接收這個物件。

在傳送元件：

methods：{
    sendEvent(){
        this.$emit('event',this.formData) //传递this.formData给监听方
    }
}

在接收元件：

mounted(){
    this.$on('event',data=>{
        console.log(data) //接收数据并进行操作
    })
}

總結：

以上即是Uniapp中常用的傳遞方法，對於開發者來說，在開發中需要靈活的選擇不同的傳遞方法，針對不同的情況選擇最容易實現和最合適的方案。值得一提的是，Vuex作為Uniapp的核心功能之一，在多個元件之間傳遞資料時，使用它是最推薦的做法，可以避免程式碼過於複雜而導致的效能損失。

以上是聊聊uniapp的傳遞方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！