父子组件数据传递
- 在子组件中的props选项,定义属性propComponent,用于父向子传递数据
- 子向父传递数据,通过事件传递的方式实现,在子组件中通过
this.$emit(‘eventEmit’,'1')
触发相应的事件,在父组件中监听eventEmit事件,并在参数中获取子向父传递过来的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.component-a .box{
width: 200px;
height: 200px;
background: mediumaquamarine;
line-height: 200px;
text-align: center;
}
.component-a p{
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<!-- 监听子组件传递过来数据 -->
<component-a :prop-component="str" @event-emit="onEventEmitHandle" />
</div>
<template id="componentA">
<div class="component-a">
<div class="box">{{propComponent}}</div>
<button @click="onEvenHandle">按钮</button>
</div>
</template>
<script>
Vue.component("component-a",{
template:"#componentA",
props:{
propComponent:{
type:String,
default:""
}
},
methods:{
onEvenHandle(){
this.$emit("event-emit","sioasojpopa");
}
}
})
const vm = new Vue({
el:"#app",
data:{
str:"模拟父子组件传递数据"
},
methods:{
onEventEmitHandle(e){
this.str = e;
}
}
})
</script>
</body>
</html>
路由传递数据
- 在路由跳转时,在params或query中携带需要传递的参数,然后在相应的页面中通过路由api获取这些参数
#通过查询字符串的方式传递参数
1.this.$router({
path:"url",
query:{
a:"10",
b:"20"
}
})
2.在页面中获取这些参数
const query = this.$route.query;
console.log("a="+query.a,"b="+query.b)
#通过页面路径来传递参数
1.this.$router({
path:"/abc",
params:{
id:"saosopaopsopa",
name:"asisniaiaiojjiosa"
}
})
2.在页面中获取这些参数
const params = this.$route.params;
console.log("id="+params.id,"b="+params.name)
vuex全局状态管理器的方式进行传递数据
- 在
state
中定义全局共享的数据 - 在
getters
中定义获取共享数据的方法,相当于vue实例中计算属性,只有相关依赖的属性发生变化时,才会重新的计算值 - 在
mutations
中定义操作state中数据的方法,并更新相关的state
数据,不允许进行异步的操作 - 在
actions
中定义触发mutations
中的方法,并随之修改相关的state
,可以进行异步的操作
依赖注入
- 在父级组件中通过
provide
定义注入子级组件的方法和数据,然后在子级组件中通过inject
引入父向子注入的数据,通过依赖注入的数据不是响应式的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.component-a .box{
width: 200px;
height: 200px;
background: mediumaquamarine;
line-height: 200px;
text-align: center;
}
.component-a p{
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<component-a />
</div>
<template id="componentA">
<div class="component-a">
<p>{{obj.a}}-{{obj.b}}</p>
</div>
</template>
<script>
Vue.component("component-a",{
template:"#componentA",
inject:["obj"]
})
const vm = new Vue({
el:"#app",
data:{
str:"模拟父子组件传递数据"
},
provide(){
return {
obj:{
a:1,
b:"sajoisiojsaiojiojas"
}
}
},
methods:{
}
})
</script>
</body>
</html>
通过localStorage
和sessionStorage
传递数据
- 设置数据:
localStorage.setItem("key","value")
- 访问数据:
localStorage.getItem("key")
- 删除数据:
localStorage.removeItem("key")
- 清空数据:
localStorage.clear()
localStorage
设置的数据,只要是通过一个网站,数据会一直存在,除非手动删除sessionStorage
设置的数据,只在当前窗口中有效,只要关闭了网站或浏览器,数据就会被删除localStorag
和sessionStorage
设置的数据,不能实现不同浏览器的数据共享,设置的数据只在当前浏览器中有效