UNI-APP_使用vue3组件通讯,父组件调用子组件方法等

小歪 | 前端

已于 2023-02-09 15:57:53 修改

阅读量1k

点赞数

分类专栏： # UNI-APP # VUE3 文章标签： uni-app javascript vue.js

于 2023-02-09 13:58:39 首次发布

本文链接：https://blog.csdn.net/weixin_44599931/article/details/128951814

版权

UNI-APP 同时被 2 个专栏收录

116 篇文章 9 订阅

订阅专栏

11 篇文章 1 订阅

订阅专栏

该文展示了在Vue.js中如何创建一个名为child.vue的组件，接收父组件通过props传递的值，并使用defineEmits定义事件来传递数据回父组件。父组件引用子组件并监听子组件的事件，通过ref获取子组件实例以调用其方法。

摘要由CSDN通过智能技术生成

一: 创建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>