【19】vue.js—父子组件

作者：文人博客 | 来源：互联网 | 2023-09-05 05:00

父子组件

<html><head><meta charset&＃61;"UTF-8"><title>title><script type&＃61;"text/Javascript" src&＃61;"js/vue.js" >script>head><body><div id&＃61;"box"><aaa>aaa>div>body><script>var vm &＃61; new Vue({el: &＃39;#box&＃39;,data: {},components: {//父组件&＃39;aaa&＃39;: {//使用子组件template: &＃39;

`我是aaa组件`

&＃39;,//子组件components: {&＃39;bbb&＃39;: {template: &＃39;我是bbb组件
&＃39;}}}}});script>
html>

vue父子组件

子组件使用父组件数据

vue默认情况下&＃xff0c;子组件没法访问父组件数据的&＃xff0c;我们需要借助组件的props属性来绑定数据&＃xff0c;使用props时注意html转js命名转换是使用驼峰转换的。

<html><head><meta charset&＃61;"UTF-8"><title>title><script type&＃61;"text/Javascript" src&＃61;"js/vue.js" >script><style>style>head><body><div id&＃61;"box"><aaa>aaa>div><template id&＃61;"aaa"><span>我是父级 -> {{msg}}span><bbb &＃64;child-msg&＃61;"get">bbb>template><template id&＃61;"bbb"><h3>子组件 ---> h3><input type&＃61;"button" value&＃61;"send" &＃64;click&＃61;"send" />template>body><script>var vm &＃61; new Vue({el: &＃39;#box&＃39;,data:{},components:{&＃39;aaa&＃39;: {data() {return {msg: 111,msg2: &＃39;我是父组件的数据&＃39;}},template: &＃39;#aaa&＃39;,methods: {get(msg) {this.msg &＃61; msg;}},components: {&＃39;bbb&＃39;: {data() {return {a: &＃39;我是子组件的数据&＃39;}},template: &＃39;#bbb&＃39;,methods: {send() {alert("子组件点击了");//点击按钮&＃xff0c;触发注册在子组件上面的&＃39;child-msg&＃39;方法this.$emit(&＃39;child-msg&＃39;,this.a);}}}}}}});script> html>

点击【子组件】中的按钮&＃xff0c;然后调用【子组件】触发函数$emit到【父组件】方法中&＃xff0c;以此方式将【子组件数据】传递到【父组件】中。

父组件调用子组件数据前

父组件调用子组件数据后

推荐阅读

byte
Python 程序转换为 EXE 文件：详细解析 .py 脚本打包成独立可执行文件的方法与技巧

在开发了几个简单的爬虫 Python 程序后，我决定将其封装成独立的可执行文件以便于分发和使用。为了实现这一目标，首先需要解决的是如何将 Python 脚本转换为 EXE 文件。在这个过程中，我选择了 Qt 作为 GUI 框架，因为之前对此并不熟悉，希望通过这个项目进一步学习和掌握 Qt 的基本用法。本文将详细介绍从 .py 脚本到 EXE 文件的整个过程，包括所需工具、具体步骤以及常见问题的解决方案。 ... [详细]

蜡笔小新 2024-11-09 14:59:47
byte
SoundPool

如果应用程序经常播放密集、急促而又短暂的音效（如游戏音效）那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点：1)延时时间较长，且资源占用率高 ... [详细]

蜡笔小新 2024-11-13 16:47:19
post
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16
post
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
post
使用Python和smtplib实现邮件发送功能

本文详细介绍了如何使用Python中的smtplib库来发送带有附件的邮件，并提供了完整的代码示例。作者：多测师_王sir，时间：2020年5月20日 17:24，微信：15367499889，公司：上海多测师信息有限公司。 ... [详细]

蜡笔小新 2024-11-12 12:21:27
post
在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解

在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]

蜡笔小新 2024-11-11 17:28:29
post
Vue 开发技巧：实现数据过滤与排序功能详解

Vue 开发技巧：实现数据过滤与排序功能详解 ... [详细]

蜡笔小新 2024-11-11 16:43:09
post
利用Struts1构建简易计算器：采用DispatchAction处理请求，动态Form优化开发流程，提供用户友好的错误提示

本文介绍了如何利用Struts1框架构建一个简易的四则运算计算器。通过采用DispatchAction来处理不同类型的计算请求，并使用动态Form来优化开发流程，确保代码的简洁性和可维护性。同时，系统提供了用户友好的错误提示，以增强用户体验。 ... [详细]

蜡笔小新 2024-11-09 19:48:22
post
关于使用JavaScript在多个页面间传递参数的技术探讨

本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言，从a.html页面跳转至b.html时，如何携带参数并使b.html替代当前页面显示，而非新开窗口。文中详细介绍了实现这一功能的代码及注释，帮助开发者更好地理解和应用该技术。 ... [详细]

蜡笔小新 2024-11-09 09:28:55
post
ESP8266 01S Web 服务器成功启动：详细解决方案与实践指南

本文详细介绍了一种利用 ESP8266 01S 模块构建 Web 服务器的成功实践方案。通过具体的代码示例和详细的步骤说明，帮助读者快速掌握该模块的使用方法。在疫情期间，作者重新审视并研究了这一未被充分利用的模块，最终成功实现了 Web 服务器的功能。本文不仅提供了完整的代码实现，还涵盖了调试过程中遇到的常见问题及其解决方法，为初学者提供了宝贵的参考。 ... [详细]

蜡笔小新 2024-11-08 19:12:49
version
Android Studio SQLite 数据库增删改查简单（代码参考）

一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]

蜡笔小新 2024-11-14 11:01:49
post
Android 自定义加载对话框 CustomProgressDialog

本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog，包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]

蜡笔小新 2024-11-12 21:51:00
nodejs
利用 Node.js 和 Express（4.x 及以上版本）构建高效文件上传功能

本文介绍了如何使用 Node.js 和 Express（4.x 及以上版本）构建高效的文件上传功能。通过引入 `multer` 中间件，可以轻松实现文件上传。首先，需要通过 `npm install multer` 安装该中间件。接着，在 Express 应用中配置 `multer`，以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置，帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]

蜡笔小新 2024-11-11 18:02:17
range
如何将TS文件转换为M3U8直播流：HLS与M3U8格式详解

在视频传输领域，MP4虽然常见，但在直播场景中直接使用MP4格式存在诸多问题。例如，MP4文件的头部信息（如ftyp、moov）较大，导致初始加载时间较长，影响用户体验。相比之下，HLS（HTTP Live Streaming）协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段，并生成一个M3U8播放列表文件，实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流，包括技术原理和具体操作步骤，帮助读者更好地理解和应用这一技术。 ... [详细]

蜡笔小新 2024-11-11 12:12:04
dll
基于Net Core 3.0与Web API的前后端分离开发：Vue.js在前端的应用

本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发，并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作，开发环境为Windows 10和Visual Studio 2019，MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装，为开发者提供了一套完整的开发指南。 ... [详细]

蜡笔小新 2024-11-11 10:58:21

文人博客

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章