VUE学习笔记 -- 页面传值

1. 父页面向子页面传值

在父组件中引用的子组件处<xxx :aaa="a"/>
在子组件中接收 props:['aaa']

父页面：Father.vue

<template><div><h1>这是父页面</h1><Son :num="a" :obj="user"/></div>
</template><script>
import Son from "@/views/log/template/Son";export default {name: "Father",components: {Son,},data(){return{a:100,user:{name:'张三',age:18,general: '男'}}}
}
</script><style scoped></style>

子页面：Son.vue

<template><div><h1>这是子页面</h1>{{num}}=======================================================<p v-for="(item,index) in obj" :key="index">{{item}}</p></div>
</template><script>
export default {props:['num','obj'],name: "Son"
}
</script><style scoped></style>

效果

vue中大小写不敏感，驼峰可以改成-隔开userName user-name

vue提供了一个props入口，也是父子组件之间唯一的传值方式，父组件通过v-bind自定义属性传入值，子组件通过props接受对应的参数

props接受的参数可以是数组，也可以是对象
props:[]
props:{ a:Number,b:String,c:String }

如果props是一个对象，那么这个对象的key是自定义传入参数属性，value是希望传入的参数类型
参数可以配置
props:{
   a:{
       type:Object,
       required: true,
       defult: ()=>{return {a:100}}, // 默认参数
       validator: function(value){return value > 50}
   }
}

2. 子组件修改父组件的参数

子组件不能直接对父组件传过来的值进行修改,只能传出一个自定义事件，父组件通过调用这个自定义事件后，然后在外部修改值
子组件 this.$emit("自定义的父组件的方法名称add")
在父组件的<xxx @add="sumNum" :aaa='a'/>

父页面

<template><div>{{a}}<h1>这是父页面</h1><p>上面是父组件</p><p>下面是子组件</p><p></p><Son :num="a" @add="sumNum"/></div>
</template><script>
import Son from "@/views/log/template/Son";export default {name: "Father",components: {Son,},data(){return{a:100}},methods:{sumNum(){this.a++}}
}
</script><style scoped></style>

子页面

<template><div><h1>这是子页面</h1>{{num}}<button @click="clickMethod">按我加一</button></div>
</template><script>
export default {props:['num'],name: "Son",methods:{clickMethod(){this.$emit("add")}}
}
</script><style scoped></style>

效果

$emit方法是vue封装的，用来向父组件返回对应的自定义事件，父组件通过在子组件身上设置对应的自定义事件后设置事件名称

@add自定义事件是子组件通过$emit传出来的自定义事件，父组件通过这个事件设置事件方法sumNum，然后修改自己的值，从而实现子组件修改父组件的值

这么做的目就是为了让数据可观察性更强，可维护性更高

3. 页面跳转传值

>>localStorage

原来页面：

localStorage.setItem("dataInfo", JSON.stringify(dataInfo)) // 对象

localStorage.setItem("aaa", aaa) // 非对象

要跳转的页面：

let dataInfo= JSON.parse(localStorage.getItem('dataInfo'))

let aaa = localStorage.getItem('aaa')

也可以使用removeItem、clear删除localStorage中的值

注意：永久有效，大小只有5M

>>sessionStorage

与localStorage用法相同，

只是生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。但刷新不会。