vue项目中的传值
在vue项目中，通过组件化开发，可以提高代码的复用，但前提是组件可以接收参数，根据参数来动态的展现数据内容，实现设计理念，下面来总结组件中的传值方式。
组件之间传值
- 父传子
子组件的代码：
<template>
<div id="container">
{{msg}}
</div>
</template>
<script>
export default {
data() {
return {};
},
props:{
msg: String
}
};
</script>
<style scoped>
#container{
color: red;
margin-top: 50px;
}
</style>
父组件的代码：
<template>
<div id="container">
<input type="text" v-model="text" @change="dataChange">
<Child :msg="text"></Child>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
text: "父组件的值"
};
},
methods: {
dataChange(data){
this.msg = data
}
},
components: {
Child
}
};
</script>
<style scoped>
</style>
父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可
- 子传父
子组件代码：
<template>
<div id="container">
<input type="text" v-model="msg">
<button @click="setData">传递到父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "传递给父组件的值"
};
},
methods: {
setData() {
this.$emit("getData", this.msg);
}
}
};
</script>
<style scoped>
#container {
color: red;
margin-top: 50px;
}
</style>
父组件代码：
<template>
<div id="container">
<Child @getData="getData"></Child>
<p>{{msg}}</p>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
msg: "父组件默认值"
};
},
methods: {
getData(data) {
this.msg = data;
}
},
components: {
Child
}
};
</script>
<style scoped>
</style>
子传父的实现方式就是用了 this.emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.emit 来遍历 getData 事件，最后返回 this.msg
-
非父子组件
非父子组件有两个解决办法- 创建一个vue实例，来充当数据的仓库
- 通过vuex状态管理来设置获取数据
实例方式：
- 需要在入口文件中新建一个全局的vue实例
import event from "vue" Vue.prototype.event = event- 在接收组件中，定义被触发的函数，来接收数据
<template> <div id="container"> <p>{{msg}}</p> </div> </template> <script> export default { data() { return { msg: "" }; }, mounted(){ this.event.$on('event',(data)=>{ this.msg = data }) } methods: { }, components: { Child } }; </script> <style scoped> </style>- 在传送组件中，触发函数，来发送数据
<template> <div id="container"> </div> </template> <script> export default { data() { return { data: "传送方的数据" }; }, mounted(){ this.event.$emit('event',this.data) } methods: { }, components: { Child } }; </script> <style scoped> </style>
vuex方式：需要单独叙述（暂不总结）
路由的传值
路由的传值，是利用路径的匹配规则，来回去路径中的数据，
通过params来获取
方式一
- 在路由文件中声明好路由
{
path:'/home/:id',
name:'home',
component:()=>import('../views/Home.vue')
},
- 在路径中传递数据
this.$router.push('/home/123')
- 在home组件中接收数据
data(){
return {
id:this.$route.params.id // id=123
}
}
方式二
- 在路由文件中声明好路由
{
path:'/home',
name:'home',
component:()=>import('../views/Home.vue')
},
- 在路径中传递数据
// 通过在路由文件声明的路由路径中的name来跳转
this.$router.push({name:'home',params:{id:123}})
- 在home组件中接收数据(需要在路由守卫中获取)
// 在路由进入之前的守卫中
data(){
return {
id:''
}
}
beforeRouteEnter(to, from, next) {
next(vm => {
// vm 是当前组件的实例，可以是任意一个参数
vm.id= to.params.id;
});
}
通过query来获取
- 在路由文件中声明好路由
{
path:'/home',
name:'home',
component:()=>import('../views/Home.vue')
},
- 在路径中传递数据
// 在跳转的路径中拼接上数据
this.$router.push('/home?id=123')
- 在home组件中接收数据
data(){
return {
id:this.$route.query.id // id=123
}
}
方式二
- 在路由文件中声明好路由
{
path:'/home',
name:'home',
component:()=>import('../views/Home.vue')
},
- 在路径中传递数据
// 通过在路由文件声明的路由路径中的name来跳转
this.$router.push(path:'/name',query:{id:123})
- 在home组件中接收数据(需要在路由守卫中获取)
// 在路由进入之前的守卫中
data(){
return {
id:''
}
}
beforeRouteEnter(to, from, next) {
next(vm => {
// vm 是当前组件的实例，可以是任意一个参数
vm.id= to.query.id;
});
}
LAW的个人博客
