vue学习笔记 十八、父子组件相互传递参数

系列导航
vue学习笔记 一、环境搭建	vue学习笔记 二、环境搭建+项目创建	vue学习笔记 三、文件和目录结构
vue学习笔记 四、定义组件(组件基本结构)	vue学习笔记 五、创建子组件实例	vue学习笔记 六、ref定义单个数据
vue学习笔记 七、方法的定义和使用	vue学习笔记 八、toRef的使用	vue学习笔记 九、父子组件实例-基本结构
vue学习笔记 十、状态管理基础结构	vue学习笔记 十一、计算属性介绍	vue学习笔记 十二、通过计算属性获取定义的状态数据
vue学习笔记 十三、路由介绍	vue学习笔记 十四、页面跳转	vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转
vue学习笔记 十六、params方式带参数的页面跳转	vue学习笔记 十七、父子组件 ---> 子组件传值	vue学习笔记 十八、父子组件相互传递参数
vue学习笔记 十九、实例完整代码

基于上一节内容补充子组件向父组件传递参数的方法。

一、 效果

1、红色部分是子组件中onMounted方法触发向父组件传递的参数

2、点击传值给父组件后，调用的是子组件中send方法触发的向父组件传递参数的方法。

二、  项目结构截图

三、代码：

index.js 跟上一节完全一样

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import Start from '../views/Start.vue'

//路由的配置属组
//paht：路由路劲 必须以/开头 必填
//component：对应的路由组件 必填
//name：路由的名字
const routes = [
  {
    path: '/',
    name: 'Start',
    component: Start
  },
  {
    path: '/home',
    name: 'Home',
  	//按需引入
  	//如果没有访问/about 就不会加载这个组件 节约性能
    component: () => import( '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
	//按需引入
	//如果没有访问/about 就不会加载这个组件 节约性能
    component: () => import( '../views/About.vue')
  } ,
  {  //页面直接输入http://localhost:8080/Test 就可以进入test.vue页面
    path: '/father',
    name: 'Father',
  	//按需引入
  	//如果没有访问/about 就不会加载这个组件 节约性能
    component: () => import( '../views/father.vue')
  }
]

//创建路由对象
const router = createRouter({
	//createWebHashHistory hash模式路径前面会多一个#号
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

father.vue

<template>
  <div class="about">
    <h1>This is an father page</h1>
	子组件传递过来的参数:{{ziParamter}}

	<!--父组件向子组件传递参数  动态绑定属性 msg的值从return中找到-->
	<!--@send为自定义事件，用来接收子组件向父组件传递参数用 send要和子组件中 ctx.emit('send',childMsg.value) 中的第一个参数相同-->
	<child :msgZi ='msg'   @send='sendDetail'></child>

  </div>
</template>

<script>
	import {defineComponent,ref} from 'vue'
	import child from '../components/child/Child.vue'
	export default defineComponent({
		name : 'Father',
		components:{
			child
		},
		setup(){
			let msg =ref('father params')
			let ziParamter = ref('')

			let sendDetail =(val)=>{
				console.log(val)
				ziParamter.value = val
			}

			return{
				msg,
			    sendDetail,
				ziParamter,
			}
		}

	})

</script>

Child.vue

<template>
  <div class="about">
    <h1>This is an child page</h1>
	父组件传递过来的数据:{{msgZi}}
	<button @click="send">传值给父组件</button>
  </div>
</template>

<script>
	import {defineComponent,ref,onMounted} from 'vue'
	export default defineComponent({
		name : 'Child',
		//专门接收父组件传递过来的参数
		//props接收的数据不能直接改
		props:{
			msgZi:{
				//数据校验
				type:String,
				//是否必传  默认是false
				required:true,
				//设置默认值
				default:'默认值'
			}
		},
		setup(props,ctx){
			console.log(props.msgZi) 

			let childMsg =ref('我是子组件的数据')
			let childNum =ref(10) 

			onMounted(()=>{
				//ctx.emit 是触发子组件向父组件传递参数的入口
				//传多个参数可以用数组的方式
				//ctx.emit('send',[childMsg.value,childNum.value])
				//多个参数还可以是对象的方式
				ctx.emit('send',{
					msg:childMsg.value,
					num:childNum.value})
			})

			let send =()=>{
				//通过ctx.emit分发事件
				//emit第一个参数是 事件名称 第二个参数是传递的数据
				ctx.emit('send',childMsg.value)
			}
			return{
				send
			}
		}
	})

</script>