Vue组件

一：组件化开发基础

1.组件是什么？有什么用？

img

组件就是：扩展 HTML 元素，封装可重用的代码，目的是复用
例如：有一个轮播图，可以在很多页面中使用，一个轮播有js，css，html
组件把js，css，html放到一起，有逻辑，有样式，有html

img

组件的分类：
  • 全局组件：可以放在根中
  • 局部组件：
工程化开发之后：

1个组件 就是1个xx.vue

二：组件的注册方式

1. 定义全局组件，绑定事件，编写样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>全局组件</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><div @click="handleClick">我是根部组件</div><global></global><ul><li v-for="i in 4"><global></global></li></ul>
</div></body>
<script>// 创建1个组件对象（全局组件）Vue.component('global', {template: `<div><div style="background: rgba(255,104,104,0.7); padding: 5px;" @click="handleClick">我是头部组件</div><div v-if="isShow">显示消失</div></div>`,methods: {handleClick() {console.log('我被点击了')this.isShow = !this.isShow}},data() {return {isShow: true}}})let vm = new Vue({el: '#box',data: {isShow: true},methods: {handleClick() {console.log('我被点击了 我是根组件')}}})
</script>
</html>

img

3. 定义局部组件

① 局部组件 放在 Vue实例(根组件) 中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>局部组件</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box" style="max-width: 300px"><local></local><global></global>
</div></body>
<script>// 创建1个组件对象（全局组件）Vue.component('global', {template: `<div><div style="background: rgba(255,104,104,0.7); padding: 5px 10px; border-radius: 5px;margin: 5px 0;">我是全局组件</div></div>`,})let vm = new Vue({el: '#box',data: {},// 创建1个组件对象（局部组件）components: {local: {    // local 组件名template: `<div><div style="background: rgba(104,255,104,0.7); padding: 5px 10px; border-radius: 5px; margin: 3px 50px 3px 0;"@click="handleClick">我是局部组件</div></div>`,  // 组件的模板methods: {handleClick() {console.log('我被点击了')}}}}})
</script>
</html>
② 局部组件 放在 全局组件 中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>局部组件</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box" style="max-width: 300px"><ul><li v-for="i in 3"><global></global></li></ul>
</div></body>
<script>// 创建1个组件对象（全局组件）Vue.component('global', {template: `<div><div style="background: rgba(255,104,104,0.7); padding: 5px 10px; border-radius: 5px;margin: 5px 0;">我是全局的组件</div><local></local><local></local><br></div>`,// 创建1个组件对象（局部组件）components: {local: {template: `<div><div style="background: rgba(104,255,104,0.7); padding: 5px 10px; border-radius: 5px; margin: 3px 50px 3px 0;">我是局部组件</div></div>`,}}})let vm = new Vue({el: '#box',})
</script>
</html>

img

注意点：

  • 定义的组件（body中的位置）必须要放在Vue实例（这也是一个组件 根组件）中
  • 局部组件 必须放在 全局组件/根组件 中，无法单独使用
  • 定义的组件必须在Vue实例的上方

二：组件编写方式 与 Vue实例的区别

Vue实例（其实，它也是1个组件，是1个根组件）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><ul><li>字符串：{{name}}</li><li>数值：{{age}}</li><li><button @click="handleClick()">Click Here</button></li></ul>
</div></body>
<script>let vm = new Vue({el: '#box',data: {name: 'Darker',age: 18,},methods: {handleClick() {alert('按钮被点击')}}})
</script>
</html>

组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>局部组件</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box" style="max-width: 300px"><ul><li v-for="i in 3"><global></global></li></ul>
</div></body>
<script>// 创建1个组件对象（全局组件）Vue.component('global', {template: `<div><div style="background: rgba(255,104,104,0.7); padding: 5px 10px; border-radius: 5px;margin: 5px 0;">我是全局组件</div><local></local><br></div>`,// 创建1个组件对象（局部组件）components: {local: {template: `<div><div style="background: rgba(104,255,104,0.7); padding: 5px 10px; border-radius: 5px; margin: 3px 50px 3px 0;">我是局部组件</div></div>`,}}})let vm = new Vue({el: '#box',})
</script>
</html>

区别：

1.自定义组件需要有1个 root element，一般包裹在 1个div中

img

2.父子组件的data是无法共享的
  • 这一点就像Docker的容器一样，是相互隔离的
  • 就算父子的data中数据相同，拥有相同的方法，也是互不影响的
3.组件可以有data、methods、computed....，但是 data 必须是一个函数
Vue实例：data是1个键值对，用来存放属性的
var vm = new Vue({el: '#box',data: {isShow: true}
})
组件：data是1个函数，需要有返回值(return)
Vue.component('global', {template: `<div><div style="background: rgba(255,104,104,0.7); padding: 5px;" @click="handleClick">我是头部组件</div><div v-if="isShow">显示消失</div></div>
`,methods: {handleClick() {console.log('我被点击了')this.isShow = !this.isShow}},data() {return {isShow: true}}
})

三：组件通信

1.父传子

  • 在全局组件中自定义属性：<global :myname="name" :myage="19"></global>
  • 在组件中获取：{{myname}}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组件</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><!-- myName是自定义属性 --><global myname="name" myage="18"></global><global :myname="name" :myage="19"></global><global :myname="'Ben'" :myage="20"></global>
</div></body>
<script>// 创建1个组件对象（全局组件/子组件）Vue.component('global', {template: `<div><div style="background: rgba(255,104,104,0.7); padding: 5px;">全局组件/子组件</div>{{myname}}{{myage}}</div>`,props: ['myname', 'myage']})// 父组件let vm = new Vue({el: '#box',data: {name: 'darker'},})
</script>
</html>

img

属性验证
  • 限制父传子的变量类型
props: {myname: String,isshow: Boolean
}
  • 父传子时候注意以下区别
<global :myname="name" :is_show="'false'"></global>
<global :myname="name" :is_show="false"></global>
<global :myname="name" :is_show="is_show"></global>
  • 实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组件</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><!-- myName是自定义属性 --><!--    <global :myname="name" :myage="19" :isshow="'false'"></global>--><global :my_name="name" :is_show="is_show"></global><global :my_name="name" :is_show="false"></global>
</div></body>
<script>// 创建1个组件对象（全局组件/子组件）Vue.component('global', {template: `<div><div style="background: rgba(255,104,104,0.7); padding: 5px;">我是子组件:{{is_show}}</div><span>{{my_name}}</span></div>`,props: {my_name: String,is_show: Boolean}})// 父组件let vm = new Vue({el: '#box',data: {name: 'darker',is_show: true},})
</script>
</html>

2.子传父（通过事件）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子传父</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><global @my_event="handleClick($event)"></global>
</div></body>
<script>// 创建1个组件对象（全局组件/子组件）Vue.component('global', {template: `<div><div style="background: rgba(255,104,104,0.7); padding: 5px;">全局组件/子组件</div><button @click="handleNav">点我</button></div>`,data() {return {name: 'Darker'}},methods: {handleNav() {console.log('我是子组件的函数')this.$emit('my_event', 666, 777, this.name)}}})// 父组件let vm = new Vue({el: '#box',data: {},methods: {handleClick(a,b,c) {console.log('我是父组件的函数')console.log(a)console.log(b)console.log(c)}}})
</script>
</html>

img

3.子传父（控制子组件的显示和隐藏）

点击子组件，就会触发父组件的某个函数执行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子传父</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><global @my_event="handleClick($event)"></global>
</div></body>
<script>// 创建1个组件对象（全局组件/子组件）Vue.component('global', {template: `<div><div style="background: rgba(255,104,104,0.7); padding: 5px;">全局组件/子组件</div><button @click="handleNav">点我</button></div>`,data() {return {name: 'Darker'}},methods: {handleNav() {console.log('我是子组件的函数')this.$emit('my_event', 666, 777, this.name)}}})// 父组件let vm = new Vue({el: '#box',data: {},methods: {handleClick(a,b,c) {console.log('我是父组件的函数')console.log(a)console.log(b)console.log(c)}}})
</script>
</html>

img

小案例
  • 子组件有1个按钮 和 1个输入框，子组件输入完内容后，数据在父组件中展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子传父 小案例</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><global @my_event="handleShow($event)"></global><br><div>父组件接收到的数据：{{name}}</div>
</div></body>
<script>// 创建1个组件对象（全局组件/子组件）Vue.component('global', {template: `<div><input type="text" v-model="myText"><button @click="handleClick">点我传数据</button></div>`,data() {return {myText: ''}},methods: {handleClick() {this.$emit('my_event', this.myText)}}})// 父组件let vm = new Vue({el: '#box',data: {name: ''},methods: {handleShow(a) {this.name = a}}})
</script>
</html>

img

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

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

相关文章

中年危机与自我成长职业女性的心理转型之路

中年危机与自我成长职业女性的心理转型之路

中年危机与自我成长&#xff1a;职业女性的心理转型之路 案例&#xff1a;李女士&#xff0c;45岁&#xff0c;职业女性 李女士是一位职业女性&#xff0c;人到中年&#xff0c;她突然感到自己的生活仿佛失去了方向。她来找我咨询&#xff0c;希望能够找到一条心理转型的道路&a…
阅读更多...
【OpenCV学习笔记07】- 【彩蛋】实现轨迹条控制画笔颜色和笔刷半径，并可以正常绘画

【OpenCV学习笔记07】- 【彩蛋】实现轨迹条控制画笔颜色和笔刷半径，并可以正常绘画

彩蛋 实现轨迹条控制画笔颜色和笔刷半径&#xff0c;并可以正常绘画。 直接上彩蛋代码 示例代码&#xff1a; # 彩蛋&#xff0c;创建一个可以调节颜色和笔刷半径的轨迹栏&#xff0c;并且可以通过鼠标进行绘画 import numpy as np import cv2 as cv# 定义全局变量 # 如果 …
阅读更多...
DRF-源码解析-1.2-CBV流程（视图函数执行流程）

DRF-源码解析-1.2-CBV流程（视图函数执行流程）

在DRF中&#xff0c;所有drf的操作都是在路由匹配完成后&#xff0c;即视图函数执行前和执行后做文章的。 一、代码准备 演示的视图&#xff1a; class TestAPIView(APIView):def get(self,request)return Respponse({code:200,msg:测试通过}) 演示的路由&#xff1a; path…
阅读更多...
Java-布隆过滤器的实现

Java-布隆过滤器的实现

文章目录 前言一、概述二、误差率三、hash 函数的选择四、手写布隆过滤器五、guava 中的布隆过滤器 前言 如果想要判断一个元素是不是在一个集合里&#xff0c;一般想到的是将所有元素保存起来&#xff0c;然后通过比较确定。链表&#xff0c;树等等数据结构都是这种思路&…
阅读更多...
JMeter+Grafana+Influxdb搭建可视化性能测试监控平台

JMeter+Grafana+Influxdb搭建可视化性能测试监控平台

【背景说明】 使用jmeter进行性能测试时&#xff0c;工具自带的查看结果方式往往不够直观和明了&#xff0c;所以我们需要搭建一个可视化监控平台来完成结果监控&#xff0c;这里我们采用三种JMeterGrafanaInfluxdb的方法来完成平台搭建 【实现原理】 通过influxdb数据库存储…
阅读更多...
官网翻译：LangChain 0.1版本发布，功能介绍

官网翻译：LangChain 0.1版本发布，功能介绍

今天&#xff0c;我们非常激动地宣布&#xff0c;LangChain 0.1.0 版本正式发布了&#xff0c;这是我们推出的首个稳定版本。这个版本能够兼容以前的版本&#xff0c;提供了 Python 和 JavaScript 两种编程语言的支持&#xff0c;并通过改进功能和文档&#xff0c;使得我们的产…
阅读更多...
kaggle如何将自己的结果存储到本地

kaggle如何将自己的结果存储到本地

1.在运行完kaggle的notebook之后点击saveversion&#xff0c;在右上角 如何不保存的话&#xff0c;结果数据会丢失 然后完成后&#xff0c;返回到主页&#xff0c;找到刚才你的那个歌notebook 点开&#xff0c;再点开output&#xff0c;就可以看到自己的notebook运行后的结果了…
阅读更多...
华为数通HCIA题库（750题）

华为数通HCIA题库（750题）

完整题库在这里&#xff1a;华为数通HCIA-RS题库注释版-加水印.pdf资源-CSDN文库 此处只节选几题。 1.网络管理员在网络中捕获到了一个数据帧&#xff0c;其目的MAC地址是01-00-5E-AO-B1-C3。关于该MAC地址的说法正确的是&#xff08; )。 A.它是一个单播MAC地址 B.它是一个广播…
阅读更多...
QT上位机开发（键盘绘图控制）

QT上位机开发（键盘绘图控制）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 绘图是qt很基础的一个功能。通常&#xff0c;我们进行qt绘图的时候&#xff0c;一般会先创建一个qt view&#xff0c;这个相当于视图。接着创建一个…
阅读更多...
【Qt之Quick模块】8. Quick基础、布局管理、布局管理器

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器

1. 前言 Qt Quick编程&#xff0c;提供了多种布局方式。 如&#xff0c;静态布局&#xff0c;可以使用组件的x、y属性进行设置&#xff0c;或者进行绑定。 还可以使用锚anchors进行布局。 此外&#xff0c;还可以使用定位器以及定位管理器为多组件进行布局。 但使用布局管理器…
阅读更多...
AI墨墨交流群正式成立：探索科技前沿，共建智能未来

AI墨墨交流群正式成立：探索科技前沿，共建智能未来

在这个充满变革的时代&#xff0c;AI技术正如涌泉般迸发&#xff0c;带来无限可能。我们深感&#xff0c;唯有汇聚智慧&#xff0c;方能更好地驾驭这股前沿科技的潮流。因此&#xff0c;我们自豪地宣布&#xff1a;AI墨墨交流群正式成立了&#xff01;这不仅是一个交流群&#…
阅读更多...
【Unity】Timer计时器属性及使用

【Unity】Timer计时器属性及使用

可以代替协程完成延时操作 可以不用Update进行计时 GitHub开源计时插件 网址&#xff1a;https://github.com/akbiggs/UnityTimer/tree/master 导入&#xff1a;URL&#xff1a;https://github.com/akbiggs/UnityTimer.git 基本功能&#xff1a; 创建计时器&#xff1a; Time…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023