【vue3父子组件之间的传值】

组合式函数父子组件的传值，通信

父组件代码

<template>
	<children id="demo1" :option="optionData" @onClick="click1" @TwoClick="click1"></children>
</template>
<script lang="ts" setup>
	import children from '../../components/children' //
	import { ref, } from 'vue'
	const optionData = ref('我是父组件data')
	const click1 = (e)=>{
	  console.log(e,'我是子组件showAlert1传过来的值')
	}
	const click2 = (e)=>{
	  console.log(e,'我是子组件showAlert2传过来的值')
	}
</script>

子组件代码

<script lang="ts" setup>
	import { defineProps, defineEmits } from "vue";
	const props = defineProps<{
	  id:string,
	  option:any
	}>()
	const emit = defineEmits(["onClick", "TwoClick"])
	// 点击事件1  这里触发传值我就不写了
	const showAlert1 = (data)=>{
	  emit('onClick', { data: data})
	}
	// 点击事件2  这里触发传值我就不写了
	const showAlert2 = (data)=>{
	  emit('TwoClick', { data: data})
	}
	onMounted(() =>{
		console.log(props.id)
    })
</script>

常规父子组件的传值，通信

子组件代码

<script lang="ts" >
	import { onMounted } from 'vue'
	export default {
		props:{
			id：‘’
		}
		setup(props, context){
			const CurrentChange = (val: number) => { 
	            context.emit('eventChange', ‘要传给父组件的数据’)
	        }
			onMounted(()=>{
	            // console.log(props.tableData,'21345678')
	        })
	        return {
	        	CurrentChange 
	        }
		}
	}
</script>

父组件代码

<template>
	<children id="demo1"  @eventChange="changeData " ></children>
</template>
<script lang="ts" >
	import { ref, onMounted } from 'vue'
	export default {
		  setup(){
		       const demo1 = ref('父组件定义的数据')
			   // 分页，页码等
			  const changeData = (e)=>{
			      console.log(e) // 我是子组件传过来的数据
			  }	
			  return {
			    demo1,
			    changeData 
			  }
		  }
	}
</script>