vue组件间的传值

一、平级组件传值

触发方:

方法一,通过方法传值

定义事件,将下列动作添加到事件的方法中,id为传入的参数

 vue.$router.push({name: 'OrderCreate', params: {id: id}})

方法二,通过router-link


接收方 :

在跳转的页面的created属性中接收该参数

created() {     
            let id = this.$route.params.id; 
        },

如果created方法不触发,则添加下列属性

'$route' (to, from) {
            let id = this.$route.params.id; 
    }

二、上级到下级

使用props属性

上级组件

在上级组件中引入下级组件,并绑定参数

    

下级组件

将上级组件绑定的参数定义到props属性中,使用时和data中的属性一样

props:['defaultEnv']

三、下级到上级

使用emit

上级组件

在上级组件中引入下级组件并绑定接收方法getEnv,该方法需要定义

    
        methods: {
                    getEnv(data){
                        this.env = data;
                    }
}

下级组件

在下级组件中将要传递的值注册到getEnv中

methods:{
            changeEnv(){
                this.$emit('getEnv',this.env);
            }
        }

你可能感兴趣的:(vue组件间的传值)