SoFunction
Updated on 2025-03-10

Method of passing parameters of router-view parent-child component in vue

1. The parent component passes the value to the child component

Parent component pass

<router-view  :projectId="projectId"></router-view>

Parameters stored in data

data(){
	return {
		projectId:'xxxxxxxx'
	}
}

Subcomponent Receive

export default {
	props:['projectId'],
	watch: {
	      projectId: function (val) {       
	       		(val);   // Receive the value of the parent component	      }
    },
}

2. The child component passes the value to the parent component

Subcomponent pass value

this.$emit('updateProjectId','xxxxxx')

Parent component receives

<router-view class="systemContent" @updateProjectId="updateProjectIdParent"></router-view>

Notice:

The updateProjectId method sent by the child component must be the same as the updateProjectId method bound to the parent component.

updateProjectIdParent(msg){
    (msg)
},

Such a simple router-view parent-child pass value is completed. In fact, router-view parent-child component pass value is the same as ordinary components, but it is confusing, thinking that this is a routing component may be different.

So if you can't handle it, you can try it boldly~

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.