vue中页面向另一页面传递数据的实例代码(实现加减功能)
时间: 2023-08-28 08:14:23 浏览: 59
好的,下面是一个简单的实例代码:
假设我们有两个页面,分别是`PageA.vue`和`PageB.vue`,我们要在这两个页面之间传递一个数值,并在`PageB.vue`中实现加减功能。具体步骤如下:
1. 在`PageA.vue`中定义一个变量`num`,并将其传递给`PageB.vue`页面:
```
<template>
<div>
<button @click="toPageB">跳转到PageB</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 10 // 定义一个变量num
}
},
methods: {
toPageB() {
this.$router.push({ path: '/pageB', query: { num: this.num } }) // 跳转到PageB,并传递num参数
}
}
}
</script>
```
2. 在`PageB.vue`中接收传递过来的参数,并实现加减功能:
```
<template>
<div>
<p>当前数值为:{{ num }}</p>
<button @click="add">加</button>
<button @click="minus">减</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 0 // 定义一个变量num
}
},
mounted() {
this.num = this.$route.query.num // 接收传递过来的num参数
},
methods: {
add() {
this.num++
},
minus() {
this.num--
}
}
}
</script>
```
以上就是一个简单的实例代码,实现了在`PageA.vue`和`PageB.vue`之间传递数据并实现加减功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)