本文主要是介绍uniapp父子组件传值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
父组件
<template> <view> <ChildComponent :childMsg="parentMsg" @updateParentMsg="handleUpdateParentMsg" /> <view>父组件接收到的消息: {{ parentReceivedMsg }}</view> </view>
</template> <script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue'; const parentMsg = ref('这是来自父组件的消息');
const parentReceivedMsg = ref(''); function handleUpdateParentMsg(msg: string) { parentReceivedMsg.value = msg;
}
</script>子组件
<template> <view @click="sendToParent">点击我传值给父组件</view> <view>子组件接收到的消息: {{ childMsg }}</view>
</template> <script setup lang="ts">
import { computed } from 'vue'; const props = defineProps<{ childMsg: string;
}>(); // 使用计算属性为 childMsg 提供一个默认值
const childMsgWithDefault = computed(() => props.childMsg ?? '默认消息');// 官方文档 withDefaults
/* const props = withDefaults(defineProps<Props>(), {msg: 'hello',labels: () => ['one', 'two']
}) */const emit = defineEmits(['updateParentMsg']); function sendToParent() { const childMsgToSend = '这是来自子组件的消息'; emit('updateParentMsg', childMsgToSend);
}
</script>这篇关于uniapp父子组件传值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
