vue基础(下篇)

介绍

对vue组件的介绍网上有很多大家可以自行查询
在这里插入图片描述
组件 (Component) 是 Vue.js 最强大的功能之一
组件可以扩展 HTML 元素,封装可重用的代

组件注册

全局注册

Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象
全局组件注册后,任何vue实例都可以用
用法:
在这里插入图片描述
注意事项:

  • 组件参数的data值必须是函数同时这个函数要求返回一个对象
  • 组件模板必须是单个根元素
  • 组件模板的内容可以是模板字符串

在这里插入图片描述

局部注册

只能在当前注册它的vue实例中使用
在这里插入图片描述

Vue组件之间传值

父组件向子组件传值

  • 父组件发送的形式是以属性的形式绑定值到子组件身上。
  • 然后子组件用属性props接收
  • 在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制

在这里插入图片描述

子组件向父组件传值

子组件用$emit()触发事件
$emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
父组件用v-on 监听子组件的事件
在这里插入图片描述

兄弟之间的传递

兄弟之间传递数据需要借助于事件中心,通过事件中心传递数据
提供事件中心 var hub = new Vue()
传递数据方,通过一个事件触发hub.emit(方法名,传递的数据)接收数据方,通过mounted()钩子中触发hub.emit(方法名,传递的数据) 接收数据方,通过mounted(){} 钩子中 触发hub.emit()mounted()hub.on()方法名
销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
在这里插入图片描述
在这里插入图片描述
上面为大家介绍的也仅仅是常用的传参方式,但vue中的组建通讯方式远不止这几种,小编再公众号中写过一篇全面的vue通讯,有兴趣的可以看一下,在文章最后有公众号的链接!

插槽

介绍

组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力

匿名插槽

在这里插入图片描述

具名插槽

具有名字的插槽
使用 中的 “name” 属性绑定元素
在这里插入图片描述

作用域插槽

父组件对子组件加工处理
既可以复用子组件的slot,又可以使slot内容不一致
在这里插入图片描述

写在最后

原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}

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

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

相关文章

MS17-010漏洞复现

攻击机:192.168.148.132 kali linux2018.2 x64 靶机:192.168.1.129 win7 x64 首先用msfconsole的smb模块扫描,看看是否有漏洞 use auxiliary/scanner/smb/smb_ms17_010 set rhosts 192.168.1.129 (目标主机) Ho…

watch 和 computed

<template><div class"hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><!-- watch/computed比较 --><div><input v-model"firstName" type"text"><input v-model"lastName&q…

[BZOJ]3173: [Tjoi2013]最长上升子序列

题解: 考虑按照元素升序加入 所以对位置在其后的元素LIS无影响 然后从前面位置的最大值转移过来就行 ,,,,平衡树无脑模拟 #include <algorithm> #include <iostream> #include <cstring> #include <cstdio> #include <vector> #include <s…

转:HTTP协议简介与在python中的使用详解

1. 使用谷歌/火狐浏览器分析 在Web应用中&#xff0c;服务器把网页传给浏览器&#xff0c;实际上就是把网页的HTML代码发送给浏览器&#xff0c;让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP&#xff0c;所以&#xff1a; HTML是一种用来定义网页的文本&#xff0c…

深受企业青睐的华为云

作为中国经济活力与韧性的重要保障&#xff0c;无数中小企业也在为夺得各自领域的冠军你追我赶。而席卷全球的数字化转型浪潮&#xff0c;则将这场冠军争夺赛推向了关键节点。企业数字化的第一步就是业务云端化&#xff0c;对企业来说云计算是不可或缺的数字底座。上云&#xf…

一个程序员的水平能差到什么程度?

老板觉得公司里都是男的&#xff0c;缺少一点阴柔之气&#xff0c;想平衡一下&#xff0c;正巧当时互金公司倒了一大批&#xff0c;大批简历投到公司&#xff0c;老板以为自己也是技术出身&#xff0c;就招了一个三年工作经验的女程序员&#xff0c;互金出来的&#xff0c;要价…

vue路由详解版一目了然

概念 路由的本质就是一种对应关系&#xff0c;比如说我们在url地址中输入我们要访问的url地址之后&#xff0c;浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系&#xff0c;就是路由。 路由分为前端路由和后端路由 1).后端路由是由服务…

go语言环境搭建

1、windows环境搭建   1、安装go   2、安装goland开发工具包 2、test.go /* 可执行文件&#xff0c;包名必须是main */ package main /* fmt 字符串格式化的包 */ import "fmt"/*main入口函数*/ func main() { fmt.Printf("Hello, world" )} View Code…

进阶函数

一、函数对象 函数是第一类对象&#xff1a;函数名指向的值可以被当做参数传递 1.函数名可以被传递 def func():print(func)f func # 函数名可以当做变量名 print(f) # f指向的也是函数func指向函数体代码的内存地址 2.函数名可以被当做参数传递给其他参数 def func():print…

vue脚手架基础API全面讲解【内附多个案例】

vscode-插件补充 vue文件代码高亮插件-vscode中安装 代码提示插件-vscode中安装 知识点自测 想学会今天的内容, 先测测这几个会不会 表达式, 变量是什么 new的作用和含义 实例化对象 什么是对象上的, 属性和方法 对象的赋值和取值 this的指向 npm/yarn是什么, package.json干…

mysql 和 sqlserver sql差异比较

mysql:select * from table_name limit 100,200;--取出从100到200的数据 获取时间&#xff1a;mysql:now() mysql tinyint&#xff08;0,1&#xff09; → bit float &#xff08;decimal(19,4)&#xff09;→ moneytext → ntextvarchar →nvarchar 转载于:https://www.cnblo…

Vue 过滤器、计算属性、侦听器 图解版 一目了然

文章目录本篇学习目标1. vue基础1.0_vue基础 v-for更新监测1.1_vue基础_v-for就地更新1.2_vue基础_虚拟dom1.3_vue基础_diff算法情况1: 根元素变了, 删除重建情况2: 根元素没变, 属性改变, 元素复用, 更新属性1.4_vue基础_diff算法-key情况3: 根元素没变, 子元素没变, 元素内容…

linux shell命令行选项与参数用法详解

问题描述&#xff1a;在linux shell中如何处理tail -n 10 access.log这样的命令行选项&#xff1f;在bash中&#xff0c;可以用以下三种方式来处理命令行参数&#xff0c;每种方式都有自己的应用场景。1&#xff0c;直接处理&#xff0c;依次对$1,$2,...,$n进行解析&#xff0c…

Vue自定义指令原来这么简单

本篇学习目标 能够了解组件进阶知识能够掌握自定义指令创建和使用能够完成tabbar案例的开发 1. 组件进阶 1.0 组件进阶 - 动态组件 目标: 多个组件使用同一个挂载点&#xff0c;并动态切换&#xff0c;这就是动态组件 需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册…

重载(overload)与重写(override)的区别

overload&#xff08;重载&#xff09;:在同一个类中&#xff0c;方法名相同&#xff0c;参数列表不相同。与返回值类型无关。 override&#xff08;重写&#xff09;:存在同一个类中&#xff0c;或者父子接口中&#xff0c;方法名相同个&#xff0c;参数列表相同。遵循“两同两…

python学习,day3:函数式编程,*arge,**kwargs

对于不固定长度的参数&#xff0c;需要使用*arge&#xff0c;**kwargs来调用&#xff0c;区别是*arge是转换为元组&#xff0c;而kwargs转化为字典 # codingutf-8 # Author: RyAn Bi def test(*args): #参数组print(args)test(1,2,4,6,7,8) #方式1 test(*[1,2,4,5,6]) #方式2 #…

那些被人忽略的Vue导航知识

本篇学习目标 能够了解单页面应用概念和优缺点能够掌握vue-router路由系统使用能够掌握链接导航和编程式导航用法能够掌握路由嵌套和路由守卫能够掌握vant组件库基础使用 1. vue路由简介和基础使用 1.0 什么是路由 目标: 设备和ip的映射关系 目标: 接口和服务的映射关系 目…

passwd命令

-n 在这几天你不能更改密码&#xff01; -x 在n<时间<x在这段时间内你必须修改密码&#xff01; -w 当距离x日期还有w天的时候开始提醒你改密码&#xff01; -i 密码过期i天之后&#xff0c;此密码停用&#xff0c;你也就无法用此密码登陆这个用户了。注意是密码过期之后…

一文带你吃透Vue生命周期(结合案例通俗易懂)

文章目录本篇学习目标1. vue生命周期1.0_人的-生命周期1.1_钩子函数1.2_初始化阶段1.3_挂载阶段1.4_更新阶段1.5_销毁阶段2. axios2.0_axios基本使用2.1_axios基本使用-获取数据2.2_axios基本使用-传参2.3_axios基本使用-发布书籍2.4_axios基本使用-全局配置3. nextTick和nextT…

[SCOI2012]滑雪 (最小生成树 Kruskal)

题目描述 a180285非常喜欢滑雪。他来到一座雪山&#xff0c;这里分布着M条供滑行的轨道和N个轨道之间的交点&#xff08;同时也是景点&#xff09;&#xff0c;而且每个景点都有一编号i(1≤i≤N)和一高度Hi​。a180285能从景点ii滑到景点j当且仅当存在一条i和j之间的边&#xf…