Vue入门四（组件介绍与定义｜组件之间的通信）

文章目录

  • 一、组件介绍与定义
    • 介绍
    • 定义
      • 1）全局组件
      • 2）局部组件
  • 二、组件之间的通信
    • 1）父组件向子组件传递数据
    • 2）子传父通信

一、组件介绍与定义

介绍

组件(Component)是Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体。封装性和隔离性非常强。

组件相当于Python中的模块，扩展HTML元素，可以重复使用的代码，使用它就是为了重复使用

例如：一个轮播图需要使用放到很多页面当中使用，一个轮播图有它自己的js、css、html，而组件就可以快捷的做出一个轮播图，有自己的js、css、html放到一起，有自己的逻辑样式这样到哪里都可以使用了，无需在写重复代码

  • 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
  • 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。

定义

1）全局组件

语法

Vue.component('组件名称', { })，第1个参数是标签名称，第2个参数是一个选项对象。全局组件注册后，任何vue实例都可以用。

组件注意事项：

  1. 构造Vue实例时，传入的各种选项大多数可以在组件里使用(el不能使用)，只有一个例外：data必须是函数，同时这个函数要求返回一个对象，保证数据唯一性，防止对象发生污染。
  2. 组件模版必须是单个根元素(html标签)
  3. 组件模版的内容可以是模版字符串
	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>组件</h1><button @click="handleClick">点击显示</button><hr><!--全局组件--><child v-if="show==true"></child></div>    <script>var vm = new Vue({el:'#div',data:{show:false,},methods:{handleClick(){this.show=!this.show}}})//定义全局组件，一次定义，随时使用//一但声明完成，就可以在所有的组件中直接使用，无需引入和注册Vue.component('Child',{//模版字符串template:`<div><h1>{{name}}</h1><button @click="clickname">点击更改名字</button></div>`,/*render 用于直接生成虚拟dom（生成标签）在工程化中，render中可以直接写jsx,在引入一个babel可以写jsx语法(js的增强版本)render(h) {// h(生成的标签名称,标签中有哪些属性（没有属性就是null）,子元素是什么)let vnode = h('h3', { attrs: { name: 'abc', style: 'color:red' } }, '我是一个标签')return vnode}*/data(){return{name:'tom',}},methods:{clickname(){this.name='jack'}}})</script></body></html>

没有使用工程化时，我们使用浏览器解析标签，所以定义组件不能使用单标签写法，否则组件无法被多次执行，因为但标签写法浏览器在解析的时候觉得有问题，不再执行后续标签。而在工程化中，我们会使用很多包来编译html标签，单标签写法是允许的

2）局部组件

单文件局部组件

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><child></child></div>    <script>// 创建局部组件,它就是一个对象// 局部组件，在创建完成后，如果你要给别人使用，一定要在配置中进行对应的配置var child = {template:`<div><h1>自定的局部组件</h1>{{title}}</div>`,data(){return {title:'hello world',}}}var vm = new Vue({el:'#div',data:{},methods:{},//局部组件要加scomponents:{// key就是在使用时的标签名称// value就是对应的局部组件对象// child: child// 简写child}})</script></body></html>

直接编写在组件内部的局部组件

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><child></child><hr><!--定义在内部的局部组件需要写在上一层组局的template中--><mcq></mcq></div>    <script>var child = {template:`<div><h1>自定的局部组件</h1>{{title}}</div>`,data(){return {title:'hello world',}}}//注意根组件与全局组件无任何关联关系，需放在根组件前面执行，否则会报错//在全局组件内定义局部组件Vue.component('mcq',{template:`<div><h1>我是全局组件</h1><xxx></xxx></div>`,data(){return {}},//在内部定义的局部组件components:{xxx:{template:`<div><h2>我是局部组件</h2></div>`,data(){return {}},}}})var vm = new Vue({el:'#div',data:{},methods:{},//局部组件要加scomponents:{// key就是在使用时的标签名称// value就是对应的局部组件对象// child: child// 简写child}})</script></body></html>

二、组件之间的通信

组件与组件之间的嵌套使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢？组件间数据传递不同于Vue全局的数据传递，组件实例的数据之间是孤立的，不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件，就需要使用props属性。在Vue中，父子组件的关系可以总结为：prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。所以我们也会经常遇到组件之间需要传递数据的时候，大致分为四种情况：

  • 父组件向子组件传递数据，通过props传递数据
  • 子组件向父组件传递数据，通过events（自定义事件—回调函数）传递数据。
  • 两个同级组件（兄弟组件）之间传递数据，通过EventBus（事件总线–只适用于极小的项目）、Vuex(官方推荐)传递数据
  • 其他方式通信-处理边界情况：
    • 1） $parent：父实例，如果当前实例有的话。通过访问父实例也能进行数据之间的交互，但极少情况下会直接修改父组件中的数据。
    • 2）$root：当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
    • 3）$children：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
    • 4） $ref：一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。访问子组件实例或子元素
    • 5） provide / inject。主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

1）父组件向子组件传递数据

	1.通过自定义属性---自定义的变量不能用驼峰，不要与子组件中的变量冲突父组件里 <child :name"name" ></child>2. 子组件中引用props,可以指定自定义属性的类型，也可以直接用数组props:{name:String} // props:['name'] /可以接收多个

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>组件通信之父传子：自定义属性</h1>父组件中的名字：{{name}}<hr><global :name="name"></global></div>    <script>Vue.component('global',{template:`<div><h2>我是global组件</h2><h3>父组件传递给子组件的：{{name}}</h3></div>`,data(){return{}},props:['name',]})var vm = new Vue({el:'#div',data:{name:'jack',},methods:{},})</script></body></html>

在这里插入图片描述

2）子传父通信

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>组件通信之子传父：自定义事件</h1>父组件接收的名字：{{p_name}}<hr><global @myevent="handleEvent"></global></div>    <script>Vue.component('global',{template:`<div><h2>我是global组件</h2><input type="text" v-model="name"><button @click="handleSend">点击传递给父组件</button></div>`,data(){return{name:'jack',}},methods:{handleSend(){this.$emit('myevent',this.name)}}})var vm = new Vue({el:'#div',data:{p_name:'',},methods:{handleEvent(name){console.log('接收到了子组件传递的名字：'+name)this.p_name=name}},})</script></body></html>

在这里插入图片描述

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

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

相关文章

【算法】不使用库函数，求解立方根

【算法】不使用库函数，求解立方根

牛客原题&#xff1a;https://www.nowcoder.com/practice/caf35ae421194a1090c22fe223357dca?tpId37&tqId21330&rp1&ru/exam/oj/ta&qru/exam/oj/ta&sourceUrl%2Fexam%2Foj%2Fta%3FtpId%3D37&difficultyundefined&judgeStatusundefined&tags&a…
阅读更多...
python——数字精度控制

python——数字精度控制

num1 11 num2 11.345 print("数字11宽度限制为5&#xff0c;结果%5d" % num1) print("数字11宽度限制为1&#xff0c;结果%1d" % num1) print("数字11.345宽度限制为7&#xff0c;小数精度为2结果%7.2f" % num2) print("数字11.345不限制…
阅读更多...
【Python】编程练习的解密与实战（一）

【Python】编程练习的解密与实战（一）

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《Python | 编程解码》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 目录 &#x1fa90;1. 初识Python &a…
阅读更多...
Android 10.0 TvSettings系统设置wifi连接密码框点击Enter键失去焦点

Android 10.0 TvSettings系统设置wifi连接密码框点击Enter键失去焦点

1.前言 在10.0的box产品开发中，在TvSettings中，在wifi连接的时候，在用遥控器输入wifi密码框的时候，会发现在按遥控器Enter键的时候， 发现EditText焦点失去了，导致输入法消失了，为了解决这个问题就需要拦截Enter键保证正常输入wifi密码，接下来就来实现这个功能 如图: 2.…
阅读更多...
网络爬虫中的代理IP应用与高效管理策略探析

网络爬虫中的代理IP应用与高效管理策略探析

在网络爬虫技术日益普及的今天&#xff0c;面对目标网站对访问频率、IP地址等的严格限制&#xff0c;如何合理、有效地利用和管理代理IP资源成为了一项至关重要的任务。本文将深入探讨代理IP在爬虫项目中的应用&#xff0c;并提出一套科学高效的管理策略。 一、代理IP在网络爬虫…
阅读更多...
pycharm社区版配置flask开发环境

pycharm社区版配置flask开发环境

新建配置文件&#xff0c;类型选择Shell Script 设置Execute中flask.exe的路径 设置options &#xff1a;--appflask_app.py run --port5000 --debug 设置working 路径 设置环境变量FLASK_APPflask_app.py;FLASK_ENVdevelopment 注意&#xff1a;FLASK_APPflask_app.py和上…
阅读更多...
LeetCode-搜索插入位置（35）

LeetCode-搜索插入位置（35）

题目描述&#xff1a; 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 思路&#xff1a; 给定数组查找指定元素值的…
阅读更多...
大数据-hive函数与mysql函数的辨析及练习-将多行聚合成一行

大数据-hive函数与mysql函数的辨析及练习-将多行聚合成一行

目录 1. &#x1f959;collect_list: 聚合-不去重 2. &#x1f959;collect_set(col): 聚合-去重 3. &#x1f959;mysql的聚合函数-group_concat 4. leetcode练习题 1. &#x1f959;collect_list: 聚合-不去重 将组内的元素收集成数组 不会去重 2. &#x1f959;collec…
阅读更多...
【OpenCV学习笔记06】- 制作使用轨迹条控制的调色板

【OpenCV学习笔记06】- 制作使用轨迹条控制的调色板

内容 学习将轨迹栏绑定到 OpenCV 窗口。你将学习这些函数&#xff1a;cv.getTrackbarPos(), cv.createTrackbar() 等等。 调色板代码 这里&#xff0c;我们将创建用以显示指定颜色的简单程序。 你有一个显示颜色的窗口和三个轨迹栏&#xff0c;用来指定 B&#xff0c;G&…
阅读更多...
界面组件DevExpress WPF v23.2 - 更轻量级的主题支持

界面组件DevExpress WPF v23.2 - 更轻量级的主题支持

DevExpress WPF Subscription拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 DevExp…
阅读更多...
wpf的资源路径

wpf的资源路径

1、手动命名空间 xmlns:share"clr-namespace:***;assembly**" 2、资源文件 Pack URI 编译到本地程序集内的资源文件的 pack URI 使用以下授权和路径&#xff1a; 授权&#xff1a;application:///。 路径&#xff1a;资源文件的名称&#xff0c;包括其相对于本地…
阅读更多...
QT第1天

QT第1天

题目&#xff1a;点击按钮改变文字 需要增加一个count属性&#xff0c;并且只需要定义槽&#xff0c;信号函数已经内置好了 //widget.h#ifndef WIDGET_H #define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Wi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023