vue2.0中的组件通信2——子组件向父组件传递数据

本文介绍Vue.js中子组件如何向父组件发送数据。通过使用$emit触发事件,子组件可以将数据传递给父组件。父组件通过v-on绑定事件监听并接收这些数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上一篇我写了父组件如何向子组件下发数据的操作,今天我们来聊聊子组件如何向父组件发送数据。在Vue.js中是通过事件来完成子组件向父组件发送数据的。
代码沿用上一篇的结构。上代码:
初始状态
子组件 childOne.vue中 先写好需要发送的数据
这里写图片描述
父组件app.vue
父组件
效果:
这里写图片描述

然后开始进行数据发送:
在子组件中增加一个按钮并未按钮绑定一个发送数据的事件sendData:在方法中调用$emit:
官方文档描述:

触发当前实例上的事件。附加参数都会传给监听器回调。

用法:$emit(“方法”,“传入参数”);
这里写图片描述
在父组件中接收数据:
需要v-on绑定一个与子组件中的方法一致的接收的方法:
这里写图片描述
最终效果如下:点击发送按钮,我们就可以在页面上看到来自子组件的数据了:
这里写图片描述
感觉有点复杂…
下一篇讲兄弟组件之间如何传递数据。

### 关于 Vue3 学习笔记教程 Vue 是一个流行的前端框架,用于构建交互式的用户界面。以下是有关 Vue3 的学习资源以及如何设置开发环境的相关信息。 #### 1. 安装 Vue CLI 并创建 Vue3 项目 为了快速上手 Vue3,可以使用官方推荐的工具 `vue-cli` 来初始化一个新的项目。安装 Vue CLI 需要 Node.js npm 支持。运行以下命令来全局安装 Vue CLI: ```bash npm install -g @vue/cli ``` 接着可以通过以下命令创建新的 Vue3 项目[^1]: ```bash vue create my-vue3-project ``` 在创建过程中可以选择 Vue3 版本作为默认选项。 --- #### 2. 使用 CDN 方式引入 Vue3 进行初步体验 如果不想立即配置本地开发环境,可以直接通过 HTML 文件中的 `<script>` 标签加载 Vue3 的 CDN 资源来进行简单的实验。例如,在 HTML 中加入以下代码即可开始编写第一个 Vue 应用程序[^2]: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue3 Example</title> <!-- 引入 Vue3 --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app">{{ message }}</div> <script> const app = { data() { return { message: 'Hello, Vue3!' } } } Vue.createApp(app).mount('#app') </script> </body> </html> ``` 上述代码展示了如何利用 Vue3 实现数据绑定功能。 --- #### 3. 组件通信:v-model 在 Vue3 中的应用 对于更复杂的场景,比如父子组件之间的双向数据绑定,Vue3 提供了增强版的 `v-model` 功能。下面是一个典型的例子,展示父组件子组件传递值并接收更新的过程[^3]: **父组件** ```javascript <script setup> import MyInput from './components/MyInput.vue' import { ref } from 'vue' const txt = ref('初始文本') </script> <template> <MyInput v-model="txt" /> <p>{{ txt }}</p> </template> ``` **子组件 (MyInput.vue)** ```javascript <script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> ``` 此示例说明了 Vue3 如何支持自定义事件名称前缀(如 `update:`),从而实现更加灵活的数据同步机制。 --- #### 4. 推荐的学习资料 除了以上提到的内容外,还有许多优秀的在线课程可以帮助深入理解 Vue3 技术栈。其中包括但不限于以下几个方面: - **尚硅谷 Vue2.0+Vue3.0 全套教程**: 结合实际案例讲解核心概念技术要点。 - **黑马程序员 Vue3 学习笔记**: 主要针对初学者设计,适合零基础入门者阅读。 - **官方文档**: https://v3.vuejs.org/guide/introduction.html —— 最权威且详尽的技术指南。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值