vue组件间的传值

一、平级组件传值

触发方：

方法一，通过方法传值

定义事件，将下列动作添加到事件的方法中,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);
            }
        }