Uniapp Vue3 父组件给子组件传值

简介: Uniapp Vue3 父组件给子组件传值

父组件代码:

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const parentMessage = '来自父组件的数据';
</script>

子组件代码:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('');
provide('message', message);
</script>
相关文章
|
10天前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
78 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
8天前
vue3+uniapp配置路由导航守卫
vue3+uniapp配置路由导航守卫
|
2月前
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
280 1
|
3月前
|
JSON 缓存 移动开发
原创自研uniapp+vue3手机桌面os管理系统
vue3-uniapp-os一款基于uniapp+vue3跨端手机版后台os系统新解决方案。
214 3
|
3月前
|
JavaScript
基于Vue3的Uniapp实训项目|一家鲜花店
基于Vue3的Uniapp实训项目|一家鲜花店
51 0
|
4月前
|
人工智能 移动开发 小程序
uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)
uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)
249 2
|
4月前
|
人工智能 小程序 前端开发
uniapp框架——初始化vue3项目(搭建ai项目第一步)
uniapp框架——初始化vue3项目(搭建ai项目第一步)
115 1
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
37 7
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
54 7