页面传值
页面传值一般是在页面跳转时，在页面路由后面添加参数，然后再目标页面渲染完毕之后，读取路由上携带的信息。
如下是由页面一跳转到页面二的代码说明
页面一: 路由page1
goPage2(row) {
this.$router.push({
name: 'page2',//跳转到第二个页面
query: {
//路由后面携带的信息
id: row.id,
type: 1
}
})
}
页面二: 路由page2
定义Data属性，并在页面元素加载完之后初始化属性值
<template>
<div>
<span v-if="type === 1">这是数字一</span>
<span v-else>{
{
typeof(type)}}</span>
</div>
</template>
<script>
export default {
components: {
},
data: function() {
return {
id: '',
type: ''
}
},
mounted() {
this.id = this.$route.query.id
this.type = this.$route.query.type
},
methods: {
}
}
注意传值时候的数据类型
在传值的时候，我们要注意一下传递的数据类型。
就比如上面示例中传递的值 type ，我们从页面一传递了一个数字 1 给页面二，页面二展示如下：
看起来很正常，传值很成功，但是如果我们刷新页面后，页面二展示如下
说明此时的 type 已经不是数字 1了。
原因是因为，刷新页面后，浏览器会将路由地址中的数字全部转换为字符串，那必然和数字 1 是不匹配的。
所以页面传值时，针对一些需要用来数据对比的值，为了避免转变数据类型，可以统一使用字符串类型去传递。
即在页面一传值时，指定数据类型。
goPage2(row) {
this.$router.push({
name: 'page2',//跳转到第二个页面
query: {
//路由后面携带的信息
id: row.id,
type: String(1) //指定为字符串 页面刷新后不影响数据类型
}
})
}
组件传值
首先定义一个组件
<template>
<div>
<pre>姓名：{
{
name}}；年龄：{
{
age}}</pre>
</div>
</template>
<script>
export default {
props: {
name: {
//接收属性
type: String,
default: () => ''
},
age: {
//接收属性
type: Number,
default: () => ''
}
},
data: function() {
return {
}
}
}
</script>
然后再父组件中使用并为子组件传值：
<template>
<Page2 :name="'阿龙'" age="18" /> //传递属性
</template>
<script>
import Page2 from './Page2.vue'
export default {
components: {
Page2
},
data: function() {
return {
}
}
}
</script>
页面展示内容如下
要注意，在组件属性中，使用 冒号 时，后面接收的是属性。不加 冒号 接受的是值。
- :name=“‘阿龙’” ▶ 姓名：阿龙；//表示传递一个属性，属性值是字符串阿龙
- :name=“阿龙” ▶ 姓名：；//页面中没有定义 阿龙 这个属性，所以姓名直接显示空白
- name=“‘阿龙’” ▶ 姓名：‘阿龙’；//表示直接传递 字符串 ‘阿龙’（带单引号）