Web前端-Vue--组件

组件

1.全局组件在所有被vue挂载的页面目标中都可以使用

全局组件的渲染

Vue.component("组件标签名称",{
//组件的封装信息
template:"组件显示的页面html",
// data: 组件使用的变量
methods:{
组件的事件驱动函数

}
})
组件的优点:
提高了页面代码的复用率因为组件可以反复使用

后期维护更方便

全局组件是所有被Vue对象挂载的目标里面都可以使用的组件

注意:
组件的标签内部不能写任何内容写了也会被覆盖不会渲染到页面
除非使用 slot插槽(后面讲)

组件标签的行内样式也同样会生效但是不推荐
建议在组件的template模板里面写
因为组件要多次复用在模板里面写所有引入该组件的地方都会生效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h1>{{msg}}</h1><!--在页面使用组件--><aaa ><!--此处内容不会被渲染-->哈哈,我是aaa组件标签的内部内容</aaa><bbb></bbb><bbb></bbb><bbb></bbb></div><div id="box"><h1>{{msg}}</h1><aaa></aaa><aaa></aaa><bbb></bbb><bbb></bbb></div>
<script src="js/vue.js"></script>
<script>//        注册全局组件Vue.component("aaa",{
//                        推荐在这写样式template:"<h1 style='font-size: 100px;'>我是aaa组件的页面模板</h1>"})Vue.component("bbb",{template:"<ul><li>我是第一条</li><li>唐雪案终于平反</li></ul>"})var vm=new Vue({el:'#app',data:{msg:'我是app的vue对象挂载的目标',}})const vm1=new Vue({el:"#box",data:{msg:"我是box的vue对象挂载的目标"}})
</script>
</body>
</html>

2.局部组件(使用的最多)

所谓的局部组件
就是在那个Vue对象里面注册的就只能在那个Vue挂载的目标里面使用

如何注册局部组件:

在Vue对象的大括号里面写上
components:{
组件标签名:{
// 组件的配置对象

}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h1>{{msg}}</h1><aaa></aaa><aaa></aaa></div>
<div id="box"><h1>{{msg}}</h1><!--<aaa></aaa>  报错 不存在这个组件 因为aaa是vm对象的局部组件--><bbb></bbb>
</div><script src="js/vue.js"></script>
<script>var vm=new Vue({el:'#app',data:{msg:'我是app的vue',},components:{aaa:{template:"<ul><li>我是第一条</li><li>唐雪案终于平反</li></ul>"}}});const vm1=new Vue({el:"#box",data:{msg:"我说box的vue"},components:{bbb:{template:"<ol><li>我是bbb第一条</li><li>唐雪案bbb终于平反</li></ol>"}}})
</script>
</body>
</html>

组件的变量数据和事件的使用:

1.组件所渲染的变量
在组件的配置大括号里面定义data
data必须是一个函数
这个函数必须return一个大括号
在大括号里面定义变量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h1>{{msg}}</h1><aaa></aaa><aaa></aaa><aaa></aaa><v-qq></v-qq></div>
<script src="js/vue.js"></script>
<script>Vue.component("aaa",{template:"<h1 @click='show'>我是aaa组件的模板----{{msg}}---{{str}}</h1>",data:function(){return{msg:"我是组件的msg变量",str:"我是第二个变量"}},/* data:{msg:"呵呵"  这种格式不对}
*/methods:{show(){alert("我是aaa组件的点击事件")}}})var vm=new Vue({el:'#app',data:{msg:'我是app的vue代码',},components:{"v-qq":{template:"<h1 @click='show'>我是v-qq组件---{{msg}}</h1>",data(){return{msg:"我是qq组件数据"}},methods:{show(){alert("我是qq组件的点击事件")}}}}});</script>
</body>
</html>

template属性

* 如果没定义该属性则Vue对象的默认页面就是el的挂载目标所在的html部分为默认页面
*
* 但是一旦定义template 那么会把template里面的模板页面直接覆盖el的挂载目标
* 甚至连挂载目标本身都没有了直接全部覆盖

组件的模板必须至少包含一个根元素
也就是说组件的模板最外层必须是单个元素
里面包含着可以有很多兄弟元素

解决代码过长：

1.字符串作为template的值作为页面模板

2.反引号模板字符串作为template的值

3.利用template标签(推荐使用)
在vue的挂载目标之外定义template标签
内部定义组件的模板内容
给template标签添加id
在组件的template属性写上值: #template标签的id即可

<template id="aa"><div><h1>我是aaa组件</h1><ol><li>我是新闻1</li><li>奥利给</li><li>新闻3</li></ol></div>
</template><div id="app"><aaa></aaa></div>
<script src="js/vue.js"></script>
<script>Vue.component("aaa",{
//            1.字符串页面模板
//            template:"<h1>我是aaa组件</h1>",
//            2.利用ES6的反引号 模板字符串/*template:`<div><h1>我是h1</h1><ul><li>我是列表1</li><li>我是2</li><li>我不是3</li></ul></div>`,*///            3.利用template标签关联组件的模板template:"#aa"})var vm=new Vue({el:'#app',data:{msg:'Hello Vue!',}});
</script>

子组件的渲染方式:

* 1.在指定的组件的大括号里面定义components属性
*
* 2.在components的大括号里面定义一个键
*
* 3.键名就是子组件的标签名值是一个json
*
* 4.在子组件的json里面配置 template data methods
*
* 子组件就只能在父组件的模板里面使用
* 出了父组件再也找不到这个组件

<template id="parent"><div><h1>我是parent父组件的模板</h1><ol><li>我是父组件的列表1</li><li>我是列表2</li><li>我是3</li></ol><!--在父组件的模板里面 引入子组件标签--><child></child></div>
</template><template id="child"><div><h2>我是child子组件的模板</h2><ol><li>我是子组件的列表1</li><li>我是列表2</li><li>我是3</li></ol></div>
</template><div id="app"><parent></parent><!--<child></child>  报错  因为 child是parent的子组件只能在parent的template模板里面引入-->
</div>
<script src="js/vue.js"></script>
<script>Vue.component("parent",{template:"#parent",
//        定义子组件components:{child:{template:"#child",}}})var vm=new Vue({el:'#app',data:{msg:'Hello Vue!',}});
</script>

通过component标签能够实现渲染指定组件

component标签是vue特有的所以必须写到vue里面
component 标签的is属性值是一个组件的标签名
is=哪个组件的标签名就渲染哪个组件
如果把 is用v-bind指令绑定就可以实现动态切换显示的组件

<template id="index"><div><h1>我是首页</h1><ul><li>猜你喜欢</li><li>限时抢购</li><li>今日推荐</li></ul></div>
</template>
<template id="gwc"><div><h1>我是购物车</h1><ul><li>商品1</li><li>商品2</li><li>商品3</li></ul></div>
</template>
<template id="user"><div><h1>我是个人中心</h1><ul><li>修改密码</li><li>VIP板栗</li><li>退出登录</li></ul></div>
</template><div id="app"><!--<component is="user"></component>--><p><button @click="show(index)" v-for="(item,index) in btnArr">{{item}}</button></p><component :is="msg"></component></div><script src="js/vue.js"></script>
<script>Vue.component("index",{template:"#index"})Vue.component("gwc",{template:"#gwc"})Vue.component("user",{template:"#user"})var vm=new Vue({el:'#app',data:{msg:"index",btnArr:["首页","购物车","个人中心"]},methods:{show(index){if(index==0){this.msg="index"}else if(index==1){this.msg="gwc"}else if(index==2){this.msg="user"}}}});
</script>

slot插槽

* 我们之前学习组件时就说到了组件标签内部所有的内容
* 在组件加载出来后都会被覆盖掉再也找不到
* 但是如果这个组件不是我们封装的
* 我们在使用时需要插入一些自定义内容根本无法实现
*
* 所以Vue为了能够让组件实现封装后别人也能插入内容
* 也就是组件标签内部的内容做一个保留
* 推出了一个人slot插槽
*
* 在组件模板中自己找个位置定义slot标签
* 这样以后该组件在使用时内部所有嵌套的内容
* 自动被保存并放到模板的slot标签的那个位置
*
* slot标签只能使用一次也就是所保留的内容只能渲染一次
*
* slot标签默认的就是会把组件标签内部的所有内容都保留下来
* 但是如果只想保留一部分或者分批次保留呢?
*
* 那么就要通过 name和slot属性做对应
*
* 步骤:
* 1.把想保留你的页面的父元素加一个slot属性
* 等于一个自己起的名字
*
* 2.在组件模板里面定义slot标签 name属性等于刚才外部起的那个slot名字
*
* 就实现了保留指定元素的效果
*
* 多个部分可以起不同的slot名字进行不同位置的保留

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<template id="bbb"><h1>我是bbb组件的内容</h1>
</template><template id="aaa"><div><h1>我是一个aaa组件</h1><!--<slot></slot>--><slot name="a"></slot><ul><li>奥利给</li><li>奥利奥</li><li>泡一泡</li></ul><!--<slot></slot>--><!--<child></child>--><slot name="b"></slot><!--<slot name="b"></slot> 只能保留一次--></div>
</template><div id="app"><!--<aaa><ol><li>我是要放入这个自定义组件内部的内容1</li><li>我是内容2</li></ol></aaa>--><!--<aaa><bbb></bbb>哈哈</aaa>--><aaa><dl slot="a"><dt>四大坚果</dt><dd>花生</dd><dd>瓜子</dd><dd>烤鱼片</dd><dd>把脚收一下</dd></dl><ol slot="b"><li>2020年</li><li>哈哈哈</li></ol></aaa>
</div>
<script src="js/vue.js"></script>
<script>Vue.component("bbb",{template:"#bbb"})Vue.component("aaa",{template:"#aaa",})var vm=new Vue({el:'#app',data:{msg:'Hello Vue!',}});
</script>

父组件给子组件传参

* 父组件的变量zai9子组件无法直接使用
* 所以我们要使用父组件给子组件传参的方式让数据传给子组件使用
*
* 父-->子传参的步骤:
* 1.在父组件的模板里面找到子组件标签
*
* 2.给这个子组件标签通过v-bind绑定一个自定义属性(属性名自己起)
*
* 3.绑定的这个自定义属性的值就是父组件要传给子组件的变量
*
* 4.在子组件的对象大括号里面定义props
*
* 5.props的值有两种格式:
* 1.props:["qq"] 值是一个数组数组里面都是字符串元素
* 每一个字符串就是父组件模板中给子组件标签绑定的那个自定义属性名
*
* 这个自定义属性就可以直接当做当前子组件date里面的一个变量
* 直接可以在子组件页面上渲染使用
*
* 2.props:{
* 那个自定义属性名:大写的传过来的值的类型名称,
* 那个自定义属性名:大写的传过来的值的类型名称,
*
* }
* props:{
* 自定义属性名1:String,
* 自定义属性名:Number,
*
* }

* 传给子组件的变量在父组件值发生改变时会自动再次传给子组件
* 让子组件也跟着更新

<template id="parent"><div><h1 @click="show">我是父组件的模板----{{msg_parent}}----{{num_parent}}</h1><ul><li >我是父组件数据1</li><li>奥利给</li><li>哈哈</li></ul><child :qq="msg_parent" :ww="num_parent"></child></div>
</template><template id="child"><div><h1>我是子组件的模板-----{{qq}}----{{ww}}</h1><ul><li>我是子组件数据1</li><li>我也是2</li><li>嘿嘿</li></ul></div></template>
<div id="app"><parent></parent></div>
<script src="js/vue.js"></script>
<script>Vue.component("parent",{template:"#parent",data(){return{msg_parent:"我是父组件的变量数据",num_parent:56}},methods:{show(){
//                    点击父组件 把 数据改变this.msg_parent="我是新改变的父组件数据"}},components:{child:{template:"#child",
//                    注册 子组件标签上面绑定的那个自定义属性
//                    props:["qq","ww"]props:{qq:String,ww:Number
//}}}})var vm=new Vue({el:'#app',data:{}});</script>

子组件给父组件传参

子组件的变量无法在父组件中直接使用
所以需要子组件给父组件传参

子组件--->父组件传参的步骤:

前提: 子组件给父组件传参必须依靠一个子组件的事件驱动(点击事件鼠标移入键盘按下等等等等等等)
1.给子组件添加一个事件(什么事件都行看具体需求)

2.在事件驱动函数里面调用 this.$emit()方法
3.this.$emit("自己起一个事件名称随便什么名字",要给父组件传过去的变量数据);
4.在父组件的模板里面找到子组件标签
5.给子组件标签通过v-on绑定 $emit第一个参数的这个事件
@$emit第一个参数的名称="父组件的methods里面的一个驱动函数"

6.通过绑定事件关联一个父组件的驱动函数

7.这个驱动函数第一个参数对应的就是$emit第二个参数也就是那个传过来的变量

8.这个时候这个变量还无法直接渲染到父组件页面

9.在父组件的data里面定义一个变量作为转接

10.在父组件对应的驱动函数被触发时直接在驱动函数里面给data的变量赋值

11.而data变量就可以直接渲染在父组件的页面上了

ps:
如果子组件的数据发生改变但是没有重新执行$emit 那么父组件是无法接受到改变的

<template id="parent"><div><h1 >我是父组件的模板----{{parent_aa}}</h1><ul><li >我是父组件数据1</li><li>奥利给</li><li>哈哈</li></ul><child @child_event="parent_method"></child></div>
</template><template id="child"><div><h1 @click="show">我是子组件的模板----{{msg_child}}</h1><ul @click="change"><li>我是子组件数据1</li><li>我也是2</li><li>嘿嘿</li></ul></div></template>
<div id="app"><parent></parent></div>
<script src="js/vue.js"></script>
<script>Vue.component("parent",{template:"#parent",data(){return{parent_aa:""}},methods:{parent_method(a){
//                    这句话是$emit方法触发的  第一个参数 就是子组件穿过来的数据console.log("父组件的驱动函数被触发,接收第一个参数:",a);this.parent_aa=a;  //给data变量赋值 让data里面的变量渲染页面}},components:{child:{template:"#child",data(){return {msg_child:"我是子组件的变量数据"}},methods:{show(){
//                            给父组件传参的方法this.$emit("child_event",this.msg_child)},change(){
//                            改变this.msg_child变量的数据  但是不$emitthis.msg_child="子组件新数据";
//                            如果只是改变子组件本身数据 而不重新执行$emit 那么父组件不会接受改变//                            this.$emit("child_event",this.msg_child);//更新一下父组件的数据}}}}})var vm=new Vue({el:'#app',data:{}});</script>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Attention Is All You Need阅读笔记
本文提出了一种新的简单的网络结构——Transformer，它完全基于注意机制，而不需要递归（RNN）和卷积（CNN）。文章链接：Attention Is All You Need 代码链接：Transformer 一、文章引入主流的Seq-Seq的模型通常采用RNN或者是CNN，一般在网络结构中都会用到encoder和decoder…...
2024/4/25 0:27:32
XTransfer外贸收款账户企业英文名称怎么填写？
我们知道，很多第三方收款平台，在注册收款账户的时候，公司名称是无法采用英文的，只能采用拼音的形式。这样就给大家带来了很多的麻烦，尤其是老外看到拼音的公司名字一头雾水，影响入账不说，还有可能造成后续订单的损失。而XTransfer为了解决这个问题，在认证XTransfer账户…...
2024/5/1 20:22:34
Swift学习笔记：Core Data 基础学习资料
Core Data是swift里常用的持久性存储方式，以下是我在学习Core Data过程中发现的比较有用的资料CoreData Ordered Lists in SwiftUI Part 1，CoreData Ordered Lists in SwiftUI Part 2通过一个清单App演示CoreData的增删改查CoreData教程，讲解了创建entity、创建relation、插…...
2024/4/25 0:27:34
开关电源的分类
目录1、按储能电感的连接方式2、按激励方式分类3、按调制方式分类4、功率开关管的分类5、按开关管的个数及连接方式6、按输入和输出电压的大小分类7、工作方式分类8、按电路结构分类9、按开关管串并联类型10、按开关管电流的工作方式11、按输出性能12、能量传递方式13、按软开关…...
2024/5/7 17:22:09
shopify上怎么收款呢？
Shopify的收款方式有很多种，例如PayPal、信用卡、Google Wallet、货到付款、汇票等，但最适合中国商户使用的是PayPal和信用卡收款。可是这两种方式如何提现到国内变现，确是一个让大家有点头疼的问题。第一种解决方式：在shopify后台绑定连连跨境支付，PayPal和信用卡收款收单…...
2024/4/25 0:27:25
Springboot快速上手- 第二篇 helloWord走起
1 基础工程创建 1：创建一个maven工程 2：加入parent<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.6.RELEASE</version></parent>3：加入启动依赖&…...
2024/4/25 0:27:28
activity多实例任务减签
前言加签或减签的操作在多实例任务节点中是经常遇见的，举例来说，某个审批节点配置了5个人审批，但是其中某个人因为特殊的原因无法进行审批了怎么办？这时候就需要用到减签的操作了下面我们通过一个简单的案例来演示下过程减签的总体实现思路 1、根据什么进行减签：执行实例…...
2024/4/25 0:27:26
rodert单排学习redis进阶【白银一】
redis之白银一说些题外话，最近帝都疫情又严重，大家都身处时代洪流中，这不是个别人能左右的，希望你能保护好自己，天天开心。[toc]前言声明：参考来源互联网，有任何争议可以留言。站在前人的肩上，我们才能看的更远。前文推荐阅读：rodert单排学习redis入门【黑铁】rodert …...
2024/4/25 0:27:22
阿里云ACA认证--day04
实验一：ECS之初体验（Linux）基础介绍云服务器（Elastic Compute Service, 简称ECS），是一种简单高效，处理能力可以弹性伸缩的计算服务。ECS的相关术语说明如下：实例（Instance）：是一个虚拟的计算环境，由CPU、内存、系统盘和运行的操作系统组成；ECS实例作为云服务器最…...
2024/4/25 0:27:21
FFmpeg转码dash/hls等格式
本文以aac数据的转码为例，其他编码格式类似，关键是明白FFmpeg转码的原理，具体实现大同小异，转码的流程如下：主要使用的函数为：avformat_write_header（）向目标文件写入文件头 av_write_frame（）/av_interleaved_write_frame（）向目标文件写入数据 av_write_trailer（）…...
2024/4/25 0:27:28
linux下如何完全删除用户
1、错误删除用户若使用userdel haha 命令删除该用户时，并不能删除该用户的所有信息，只是删除了/etc/passwd、/etc/shadow、/etc/group/、/etc/gshadow四个文件里的该账户和组的信息。默认情况下创建一个用户账号，会创建一个家目录和一个用户邮箱（在/var/spool/mail目录以…...
2024/5/7 17:40:38
C++中的继承
继承概念类级别的代码复用继承方式：public、protected、private protectde访问权限/private访问权限：protected —> 在当前类和子类中可见，在其他地方不可见 private —> 在当前类中可见，在其他地方不可见父类成员在子类中的访问权限：min { 成员在父类中的原始访问…...
2024/4/25 0:27:18
更新线上的 Java 服务器代码
1 更新线上的 Java 服务器代码一、前言 1、热更新代码的场景（1）当线上服务器出现问题时，有些时候现有的手段不足以发现问题所在，可能需要追加打印日志或者增加一些调试代码，如果我们去改代码重新部署，会破坏问题现场，可以通过热部署的手段来增加调试代码（2）线上出现…...
2024/4/25 0:27:20
最新独立版狮子鱼13.4.0-官方独立版开源去授权_带直播
1、宝塔创建一个新站点 2、新建一个数据库、解析一个新域名、创建一个SSL证书，建议开启强制HTTPS 3、做好以上相关准备工作，再继续看教程！ 4.教程资源可以前往csdn获取https://download.csdn.net/download/FizzNoc/125534895、解压“后台.ZIP”至网站根目录，您的网站目录结…...
2024/4/18 3:24:08
AD5933不同频率下的转换结果
01简介AD5933阻抗转换模块是一款基于AD公司的 AD5933 芯片的测量复阻抗的电路模块。在 AD5933阻抗转换器、网络分析仪初步实验中对该模块进行了初步的实验。由于该芯片的基本原理是采集有芯片内部产生的正弦波电压信号激励下复阻抗相应的正弦电流信号，经由芯片内部的I-V转…...
2024/4/16 4:21:15
defer不同版本之前的区别
Defer 1.12 vs 1.13 vs 1.14 原文来自：https://maronghe.github.io/1.12之前 defer func(){} —> 会被翻译成两个函数deferproc() : 注册，defer func(){} 到g的defer链表中，头插法。defer需要进行堆分配，而且参数变量需要进行堆栈间拷贝。runtime.deferreturn() : 执行…...
2024/4/19 20:19:21
XML的DTD语法规则
1.什么是DTD 文件类型定义（约束） 2.什么是XML文件 XML：可扩展标记语言 HTML：超文本标记语言 3.如何创建XML文件 1）必须有文件开头<?xml version="1.0" encoding="UTF-8"?>2）必须有根目录3）必须有子节点 4.XML格式要求 1）有且只有一个根节点…...
2024/4/18 21:19:58
[C/C++11]_[初级]_[如何计算函数的运行时间]
场景在C++11里新增了chrono库，可以使用这个库进行计算函数运行时间。如何做？如果我们的编译器不支持C++11,或者使用C语言，我们如何使用标准库计算函数运行时间？说明在C的标准库<time.h>里，我们可以使用clock()来获取处理器当前时间，再经过换算得到毫秒数.而在C++11…...
2024/4/25 0:27:19
pyinstaller 如何打包额外的dll等文件
感谢博主：https://blog.csdn.net/xinyingzai/article/details/80282856详细可跳转上面的链接。主要是认识pyinstaller里面的的spec文件：# -*- mode: python ; coding: utf-8 -*-block_cipher = Nonea = Analysis([main.py],pathex=[I:\\pyqt5\\video2image_app],binaries=[],…...
2024/4/25 0:27:20
1、Python：注释
1、Python语言允许在任何地方注释，但不能插入到标识符和字符串中间 Python有两种注释方式：单行注释、多行注释...
2024/4/25 0:27:14

Web前端-Vue--组件

组件

1.全局组件在所有被vue挂载的页面目标中都可以使用

2.局部组件(使用的最多)

组件的变量数据和事件的使用:

template属性

子组件的渲染方式:

通过component标签能够实现渲染指定组件

slot插槽

父组件给子组件传参

子组件给父组件传参

相关文章

最新文章

Web前端-Vue--组件

组件

1.全局组件 在所有被vue挂载的页面目标中都可以使用

2.局部组件(使用的最多)

组件的变量数据和事件的使用:

template属性

子组件的渲染方式:

通过component标签能够实现渲染指定组件

slot插槽

父组件给子组件传参

子组件给父组件传参

相关文章

最新文章

1.全局组件在所有被vue挂载的页面目标中都可以使用