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存储的数据也就被清空了。但刷新不会。