vue3中组件传值

vue3 setup写法

子组件触发父组件事件

子组件

<view class="bg-white text-black px-3 rounded-pill me-2 fw-bold" @click="triggerEvent">{{ navButton1 }}</view>

 const triggerEvent = () => {
    emit('childEvent', 想父组件传递的参数)
};

父组件

	<view class="content">
		<IndexHeader @childEvent="handleEvent"></IndexHeader>
	</view>

import { defineEmits  } from 'vue';
import  IndexHeader from '../components/nav.vue'

defineEmits(['childEvent'])
const handleEvent=(msg)=>{
	uni.navigateTo({
		url:msg
	});
}

父组件给子组件传值

父组件

	<view class="content">
		<IndexHeader :message="message"></IndexHeader>
	</view>

let message=ref({
	text:'订房11',
	button1:'楼面',
	button2:'',
	button1Url:'/pages/index/list',
	button2Url:'/pages/index/view'
})

子组件

const props = defineProps({
	message: Object,
});
const test=props.message.text