vue3利用自定义事件和v-model实现父子传参

一、父组件利用v-model向子组件传递参数

1、父组件

//引入子组件
import tan from '@/components/index/tan.vue'
import {ref} from 'vue'
const popupShow=ref('11')

// v-model:popupShow="popupShow"   自定义语法糖名称
// @changTxt='changText'     自定义事件
<tan v-model:popupShow="popupShow" @changTxt='changText'></tan>

2、子组件接参数

import { defineProps } from 'vue'

let props = defineProps(["popupShow"]);//接收父组件给子组件传递的数据

consot.log(props.popupShow)//在控制台打印输出参数

二、子组件利用自定义事件向父组件传递参数

1、子组件

<view @click="Request">确认</view>

const emit = defineEmits(['changTxt'])//给父组件传递参数
//触发时间传递参数
function Request(){
		emit("changTxt",'我要向父组件传递参数');
	}

2、父组件

<tan :popupShow="popupShow" @changTxt='changText'></tan>

import tan from '@/components/index/tan.vue'//引入子组件

// 子组件传给父组件的参数
	function changText(obj){
		console.log(obj)//我是子组件传递过来的参数
	}