第10讲:Vue组件的定义与注册

定义组件

1. 在程序的 components 目录下新建一个名为 Child.vue 的文件
2. 在文件内键入如下代码
<template><div>Child</div>
</template>
<script>
export default {name: 'Child'
}
</script>
新建的 Child .vue 文件即为我们定义的组件文件的位置一般放在 src 目录下的 components 目录下

在App.vue文件内注Child.vue组件

1. 首先将组件引入到 App.vue 文件内
import Child from './components/Child'
注意:组件引入时不需要使用后缀名.vue
2. App.vue 模块内添加一个名为 components 的属性
3. 将组件注册到 App.vue 文件内
components: {
        Child
}
4. template 标签内使用 Child 组件
< Child />

Vue组件之间的传值

父子组件通信

如何定义父子组件?
将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以直接用<自定义标签></自定义标签>样子使用。当前组件为父组件,被引入的组件为子组件。

父组件向子组件传值

一般在子组件内定义props来做接收 即:
props: [
     'msg'
]
Child .vue 文件代码变更如下:
定义好 props 之后我们可以在父组件传递 props 参数
<template><div><h2>子组件,嵌套到一个页面的内部使用</h2>接收到父组件传递的参数值:<b>{{msg}}</b><br>您的姓名是:{{name}},年龄:{{age}}<br></div>
</template>
<script>export default({name: 'Child',//定义属性,其他页面调用该组件时,可以通过属性名称返回值props:["msg","name","age"]})
</script>

父组件代码如下

<template><div><h2>父组件加载子组件</h2><hr><!--3.调用子组件,并且向子组件传递参数--><Child msg="父组件传递给子组件的参数" name="张三" age="20"/></div>
</template>
<script>
/*1.导入子组件
*/
import Child from '../../components/Child'
export default ({name: 'Parent',//2.注册子组件components:{Child}
})
</script>

子组件向父组件传值

子组件通过调用 this.$emit() 方法向父组件传值
基本语法:
this.$emit('func', param)
func: 为父组件中绑定的函数名,可自定义
param: 为要传递的参数
<Child @func=”funcHandle”>
其中 funcHandle 需在父组件中定义好相应的方法,该方法接收一个或多个参数
funcHandle(val) {
    this.msg = val
}

子组件修改代码如下:

this.$emit('parentFunc',this.title);

父组件修改代码如下:

<Child msg="父组件传递给子组件的参数" name="张三" age="20" @parentFunc="receFunc"/>

methods:{

        receFunc(val){

            this.title = val

        }

    }

Child.vue完整代码

<template><div><h2>子组件,嵌套到一个页面的内部使用</h2>接收到父组件传递的参数值:<b>{{msg}}</b><br>您的姓名是:{{name}},年龄:{{age}}<br>标题:<input type="text" v-model="title"><input type="button" @click="test()" value="返回值给父组件"></div>
</template>
<script>export default({name: 'Child',//定义属性,其他页面调用该组件时,可以通过属性名称返回值props:["msg","name","age"],data(){return {title:''}},methods:{test(){//调用父组件的函数,同时传回参数//parentFunc父组件的函数// alert(this.title)this.$emit('parentFunc',this.title);}}})
</script>

parent.vue完整代码

<template><div><h2>父组件加载子组件</h2><hr><!--3.调用子组件,并且向子组件传递参数--><Child msg="父组件传递给子组件的参数" name="张三" age="20" @parentFunc="receFunc"/>子组件返回的值是:{{title}}<h3 align="left">子组件传参给父组件的实现步骤</h3><hr><p align="left">1.在parent.vue文件定义接受函数:receFunc<br>2.定义调用组件时的事件的名称@parentFunc,该名称自定义<br>3.在parent.vue文件调用子组件:&lt;Child msg="父组件传递给子组件的参数" name="张三" age="20" @parentFunc="receFunc"/&gt;<br>4.在child.vue文件定义test函数,利用$emit方法调用函数:this.$emit('parentFunc',this.title);返回子组件的值<br>5.parentFun名称为自定义,主要parent.vue,child.vue两边使用的名称一致即可</p></div>
</template>
<script>
/*1.导入子组件
*/
import Child from '../../components/Child'
export default ({name: 'Parent',//2.注册子组件components:{Child},data(){return{title:''}},methods:{receFunc(val){this.title = val}}})
</script>

本人从事软件项目开发20多年,2005年开始从事Java工程师系列课程的教学工作,录制50多门精品视频课程,包含java基础,jspweb开发,SSH,SSM,SpringBoot,SpringCloud,人工智能,在线支付等众多商业项目,每门课程都包含有项目实战,上课PPT,及完整的源代码下载,有兴趣的朋友可以看看我的在线课堂

讲师课堂链接:https://edu.csdn.net/lecturer/893

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/96690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】面向对象编程(二)面向对象的编程思维:virtual虚拟调用、继承、protected成员、派生类与基类

默认情形下&#xff0c;成员函数的解析都是编译时静态进行。如果要让成员函数的解析在程序运行时动态进行&#xff0c;需要在成员函数的声明前加上关键字virtual&#xff1a; //LibMat声明表示&#xff0c;其析构函数和print()函数皆为虚函数 class LibMat{ public:LibMat(){c…

关于性能测试需要重视的要点

性能测试已经是一个老生常谈的话题了&#xff0c;不同的项目或多或少都会涉及到&#xff0c;但是每个人的经验肯定有所不同。今天我想从以下几个方面分享一下我认为关于性能测试需要重视的要点。 性能测试工程师必看视频教程&#xff1a;字节性能测试工程师视频教程&#xff0…

uniapp uni.showToast 一闪而过的问题

问题&#xff1a;在页面跳转uni.navigateBack()等操作的前或后&#xff0c;执行uni.showToast&#xff0c;即使代码中设置2000ms的显示时间&#xff0c;也会一闪而过。 解决&#xff1a;用setTimeout延后navigateBack的执行。

GitLab平台安装中经典安装语句含义解析

yum -y install policycoreutils openssh-server openssh-clients postfix 这是一个Linux命令&#xff0c;用于使用YUM包管理器安装指定的软件包。下面是对这个命令各部分的解释&#xff1a; yum&#xff1a;这是一个Linux命令行工具&#xff0c;用于管理RPM&#xff08;Red …

【C语言 模拟实现strcmp函数】

C语言程序设计笔记---025 C语言之模拟实现strcmp函数1、介绍strcmp函数2、模拟实现strcmp函数3、结语 C语言之模拟实现strcmp函数 前言&#xff1a; 通过C语言字符串函数的知识&#xff0c;这篇将对strcmp函数进行深入学习底层原理的知识&#xff0c;并模拟实现对应功能。 /知…

搭建Windows上的Qt桌面开发环境

搭建Windows上的Qt桌面开发环境 准备有效邮箱安装VS2019 CommunityMicrosoft个人账号注册地址下载在线安装器安装C工具链 安装QtQt开发者账号注册地址下载在线安装器安装Qt 5.15工具链和Qt Creator 使用Qt Creator编译示例工程配置构建套件&#xff08;Kit&#xff09;打开示例…

算法通过村第十二关-字符串|黄金笔记|冲刺难题

文章目录 前言最长公共前缀纵向比较横向比较 字符串压缩问题表示数值的字符串总结 前言 提示&#xff1a;我有时候在想&#xff0c;我是真的不太需要其他人&#xff0c;还是因为跟他们在一起时没法自己&#xff0c;所以才保持距离。我们的交谈就像是平行而毫无交集的自言自语。…

账户和组管理

1. 账户和工作组的分类 1.1. 用户分为三类&#xff1a; 超级账户——账户名为root&#xff0c;它具有一切权限&#xff0c;只有进行系统维护(例如&#xff1a;建立用户等)或其他必要情形下才 用超级用户登录&#xff0c;以避免系统出现安全问题。 系统账户——是Linux系统正常…

springBoot -md

法1 Editor.md https://blog.csdn.net/weixin_42039228/article/details/123472875 CREATE TABLE article ( id int(10) NOT NULL AUTO_INCREMENT COMMENT int文章的唯一ID, author varchar(50) NOT NULL COMMENT 作者, title varchar(100) NOT NULL COMMENT 标题, content l…

HTML常见错误

学习HTML时&#xff0c;初学者常常会犯一些常见的错误。以下是一些常见错误示例以及如何修改它们的提示&#xff1a; 1. 缺少<!DOCTYPE html>声明 示例错误&#xff1a; <html><head><title>我的网页</title></head><body><h1…

element-plus自动引入组件报错,例如collapse、loading

element-plus自动引入组件&#xff0c;例如collapse、loading&#xff0c;使用时报错&#xff0c;报错信息如下图所示&#xff1a; 解决办法&#xff1a;vite-config.ts改变vue的引入顺序&#xff0c;将vue放在第一个

六个为Rust构建的IDE

Rust语言的学习曲线适中&#xff0c;介于高级语言和低级语言之间。这门语言既能编写系统软件&#xff0c;将嵌入式设备编译为x86 ARM&#xff0c;也可以用于前端技术&#xff0c;这要归功于WebAssembly。 在日渐成熟的发展中&#xff0c;Rust开始拥有更好的工具来提高效率。最…

【送书第三期】强势挑战Java,Kotlin杀回TIOBE榜单Top 20!学Kotlin看哪些书?

文章目录 前言01 《深入实践Kotlin元编程》02 《Spring Boot学习指南》03 《Kotlin编程实战》文末送书 前言 与Java一样&#xff0c;Kotlin也是用于Android应用程序开发的编程语言&#xff0c;是Android官方支持的第二种编程语言。 2016年Kotlin正式发布&#xff0c;在Androi…

htb-cozyhosting

HTB-CozyHosting https://app.hackthebox.com/machines/CozyHosting ──(kwkl㉿kwkl)-[~] └─$ tail -l /etc/hosts …

c#访问sql server数据库登录失败

以下配置适用于如下情况&#xff1a;已经能连接数据库的server&#xff0c;而且用户名、密码都对&#xff0c;但通过c#访问数据库时出错&#xff0c;提示login、管道相关的错误。通过一些配置&#xff0c;最终解决了该问题&#xff0c;遇到该问题的小伙伴也可以按照同样配置尝试…

【轻松玩转MacOS】基本操作篇

引言 本文是系列的开篇&#xff0c;我将为大家介绍MacOS的基本操作。对于初次接触MacOS的用户来说&#xff0c;掌握这些基本操作是必不可少的。无论是启动和关机&#xff0c;还是使用键盘和鼠标&#xff0c;或者是快捷键的使用&#xff0c;这些基本操作都是你开始使用MacOS的第…

微信小程序开发缺少中间证书问题(腾讯云、阿里云等做服务器)

项目使用nginx做负载均衡后&#xff0c;不再采用原来直接用jar包的方式直接开启对应端口&#xff0c;所以需要重新从云服务器上下载证书&#xff0c;写入到Nginx读取的证书路径上即可。

XSS CSRF

XSS & CSRF xss&#xff1a;跨站脚本攻击&#xff1a;注入一些非法的脚本 csrf&#xff1a;冒充身份 XSS 反射型 /welcome&#xff1a;res.send(req.query.type) 输入什么就输出什么&#xff08;httpOnly:false&#xff0c;但不是解决方案&#xff09; 比如&#xff1a;?&…

iPhone升级iOS17出现无法连接互联网的错误提示怎么办?

最新的iOS 17系统已经发布了快一个月了&#xff0c;很多人都已升级体验更多全新功能&#xff0c;但有部分用户却在升级过程中遇到一些问题&#xff1a;如无法验证更新&#xff0c;iOS17验证失败&#xff0c;因为您不再连接到互联网、 iPhone无法检查更新等错误问题。明明网络稳…

代码随想录 Day - 60|#739 每日温度|#496 下一个更大元素 I

清单 ● 739. 每日温度 ● 496. 下一个更大元素 I LeetCode #739 每日温度 1. 题目 给定一个整数数组 temperatures&#xff0c;表示每天的温度&#xff0c;返回一个数组 answer&#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气…