vue3组件间传值_vue3 router-view传值

通过路由跳转传值

• router的使用（传值的一方）

//引入vue-router
import { useRouter } from "vue-router";
setup() {
	// 获取路由对象 router
	const router = useRouter();
	//router 传值，通过name跳转
	router.push({ name: 'nextindex', query: { id: it.id } })
}

1
2
3
4
5
6
7
8
9

• route的使用（获取值的一方）

//引入vue-router
import { useRoute } from "vue-router";
setup() {
	// 获取路由对象 route
	const route = useRoute();
	//拿到路由传的值
	let id = route.query.id;
	console.log(id);
}
1
2
3
4
5
6
7
8
9

父向子传值

• 通过父组件绑定自定义参数传值（vue2中的方法，vue3仍然可以用）

父组件

//父组件绑定自定义变量cid,将值id传给子组件
<goods-list :cid="id" />
1
2

子组件

//props接收cid
props: ['cid'],
//在setup中使用
setup(props) {
//接收props传的值
console.log(props.cid)
}
1
2
3
4
5
6
7

子向父传值

• 使用emit子向父传值
• 子组件

setup(props,context){
	//使用context.emit传值
	context.emit('click-receive','向父组件传的值')
}
1
2
3
4

• 父组件

<template>
  <!--自定义事件click-receive-->
  <div @click-receive="parentEmit"></div>
</template>


setup() {
  function parentEmit(val){
      console.log(val)//'向父组件传的值'
  }
  return{
      parentEmit
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用provide、inject实现后代传值

先辈组件

//引入provide 
import { provide } from "vue";
export default {
	setup() {
		//provide中第一个参数values为传值的键，第二个参数其值
	    provide("values", "我是传的值");
	}
}
1
2
3
4
5
6
7
8

后代组件

//引入inject 
import { inject } from "vue";
export default {
	setup() {
		//声明一个变量values接收传来的值
	    const values = inject("values");
	    console.log(values);
	}
}
1
2
3
4
5
6
7
8
9