uniapp 使用vue3 (第三篇 组件通讯,父组件调用子组件方法等)

记录日常开发的总结,包含vuex,全局方法,http请求,组件等等

一: 创建child.vue 组件

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue';
	
	//	接受父组件传值
	const props = {
		info: {
			type: Object,
			default () {
				return {
					okInfo: {}
				}
			}
		}
	}
	console.log(props.info)
	
	//	定义返回给父组件的方法
	const emit = defineEmits(['change'])
	const testClick = (e) => {
		emit('change', e)
	}
	const clickButton = () => {
		console.log("测试")
	}
	//	抛出子组件方法让父组件调用
	defineExpose({
		clickButton
	})
</script>

二: 在父组件引用

<child ref[="childRef" :info="info" @change="handChange" />
<script setup>
	import { reactive, defineComponent } from 'vue';
	import child './components/child.vue'
	defineComponent({
		components: {
			child
		}
	})
	const info = reactive({
		name: '张三',
		age: 99
	})
	const handChange = (e) => {}
	//	调用子组件方法
	const childRef = ref(null)
	const handClick = () => {
		childRef.value.clickButton()
	}
</script>