Uni-app页面间的消息、信号传递

_kyoleon

已于 2023-04-21 08:58:47 修改

阅读量346

点赞数

文章标签： js vue.js 前端小程序

于 2023-04-20 17:36:07 首次发布

本文链接：https://blog.csdn.net/qq_43713840/article/details/130271959

版权

文章介绍了在Vue.js中如何进行页面间的消息传递，包括父组件通过props向自定义子组件传递数据，子组件通过$emit向父组件发送信号，以及使用uni.navigateTo和uni.redirectTo进行页面跳转并携带数据的方法。

摘要由CSDN通过智能技术生成

页面间的消息、信号传递

1、自定义模板与父页面之间的数据传输：

(1)、引入自定义组件并注册，再通过 `:value="value"` 形式传递

场景：父组件将请求的信息传递到子组件，在子组件中进行渲染

在父组件中,myself为自定义组件，传递的信息可以是普通数据类型也可以数组

    <myself :value='value' ></myself>

    <script>
    import myself from '../path'
    export default {
        data() {
            return {
                value: []
            }
        },
        components:{
            myself
        }

    }

</script>

在子组件myself中，通过props接收并可以通过watch方式监听：

<script>
    export default {
        data() {
            return {
                showData: []
            }
        },
        props: {
            value:{
                type: Array,
                default:() => []
            }
        },
        watch: {
            value:{
                value: function(newVal, oldVal){
                    this.showData = newVal
                }
            }
        }

    }

</script>

2、子组件向父组件传送信号通过$emit的方式

场景：子组件实现分页，向父组件发送获取更多数据的请求

子组件使用this.$emit(‘getMoreData’)

getNewsData () {
	this.$emit('getMoreData');			
},

父组件在调用该组件的地方使用@ + 子组件的名字，调用响应方法
<myself @getMoreData=“getMoreData()”>

3、页面跳转uni.navigateTo或者uni.redirectTo并且带上数据

场景：点击某一项，显示该项的详细信息
uni.navigateTo 会保留当前页面状态，压入页面栈可以通过uni.navigateBack返回上一个页面

uni.redirectTo 重定向到新的页面，之前页面丢失

a页面

uni.navigateTo({
	url: '/pages/b?id=' + id
})

b页面

export default {
        data() {
            return {
               onLoad(val) {
			this.orderId = val.id //获取页面传参
		},
            }
        },
        methods: {
            exit(){
                uni.navigateBack({
                    delta: 1
                })
            }
        }

    }