一、平级组件传值
触发方:
方法一,通过方法传值
定义事件,将下列动作添加到事件的方法中,id为传入的参数
vue.$router.push({name: 'OrderCreate', params: {id: id}})
方法二,通过router-link
<router-link :to="{name:'OrderDetail', params: {id: item.id}}" class="row" v-for="item in orderList" tag="div" :key="item.id">
接收方 :
在跳转的页面的created属性中接收该参数
created() {
let id = this.$route.params.id;
},
如果created方法不触发,则添加下列属性
'$route' (to, from) {
let id = this.$route.params.id;
}
二、上级到下级
使用props属性
上级组件
在上级组件中引入下级组件,并绑定参数
<EnvSelect v-bind:defaultEnv="value"></EnvSelect>
下级组件
将上级组件绑定的参数定义到props属性中,使用时和data中的属性一样
props:['defaultEnv']
三、下级到上级
使用emit
上级组件
在上级组件中引入下级组件并绑定接收方法getEnv,该方法需要定义
<EnvSelect v-on:getEnv="getEnv($event)" ></EnvSelect>
methods: {
getEnv(data){
this.env = data;
}
}
下级组件
在下级组件中将要传递的值注册到getEnv中
methods:{
changeEnv(){
this.$emit('getEnv',this.env);
}
}