标签：setup props vue3 组件 router id 传值

通过路由跳转传值

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

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

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

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

父向子传值

• 通过父组件绑定自定义参数传值

父组件

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

子组件

//props接收cid
props: ['cid'],
//在setup中使用
setup(props) {
//接收props传的值
console.log(props.cid)
}

子向父传值

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

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

• 父组件

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


setup() {
  function parentEmit(val){
      console.log(val)//'向父组件传的值'
  }
  return{
      parentEmit
  }
}
</script>

使用provide、inject实现后代传值

先辈组件

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

后代组件

//引入inject 
import { inject } from "vue";
export default {
	setup() {
		//声明一个变量values接收传来的值
	    const values = inject("values");
	    console.log(values);
	}
}

标签：setup,props,vue3,组件,router,id,传值
来源： https://blog.csdn.net/m0_46689418/article/details/121755969

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。