《第6章 组件课件.pptx》由会员分享，可在线阅读，更多相关《第6章 组件课件.pptx（17页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第6章组件组件（Component）是 Vue最强大的功能之一。组件可重用性高，可减少重复性的开发。第6章 组件在Vue中组件是构成页面中独立结构单元，是从UI界面的角度来进行划分的，Vue可以把网页分割成很多组件。6.1 Vue组件第6章 组件组件（Component）是 Vue最强大的功能之一。组件可重用性高，可减少重复性的开发。6.2组件定义及调用6.2.1 全局组件的定义及调用（1） 全局组件的定义语法：Vponent( 组件的名称，以对象的形式描述组件的配置选项)“组件名称”的命名:规范中自定义组件名推荐是使用 kebab-case (短横线分隔命名)配置选项对象:选项对象属性有 d
2、ata、computed、watch、methods 以及生命周期钩子等第6章 组件组件的结构模板，模板中只能有一个根节点。 Data定义组件的初始数据，与new Vue的data选项定义不同，组件是可复用的，所以数据要定义为私有的状态，必须要把data定义为一个函数，并且要求返回一个对象。例如：data:function()returnmsg:helloVue!,第6章 组件全局组件，在全局都可以调用，调用组件跟使用标签一样，标签名为组件名即可。（2）全局组件的调用第6章 组件局部组件是定义在Vue实例上，在一个实例上定义，就在该实例所挂载的区域内使用，使用配置项components（复数）
3、，一个实例可以配置多个组件，多个组件配置在一个对象中。局部组件的定义及调用局部组件，只在定义它的实例所挂载的区域内使用，调用方法跟全局组件调用方法相同。语法：components：组件名1： 组件配置选项 ,组件名2： 组件配置选项 ,第6章 组件6.3组件的层级关系网页合理分割成很多组件，组件可以嵌套组件，形成组件层级父子关系、兄弟关系。（1）定义全局组件的层级关系全局组件的层次关系是在调用时确定的。（2）定义局部组件的层级关系局部组件定义层级关系，每个组件都有Components配置选项来配置嵌套下级组件。第6章 组件6.4组件之间的通讯组件默认只能调用自己的属性和方法，不能调用其它组件的
4、属性和方法，如要调用就需要用到数据通信。父组件传递数据给子组件在子组件中props选项定义属性来接收父组件传来的数据。在子组件中定义结构，数据定义在父组件中，在调用子组件时，通过绑定属性来传值。第6章 组件Props的值类型可以定义为数组，用数组来定义多个属性。例： props:msg,open,如定义的属性需要指定类型检测、自定义验证和设置默认值， Props的值类型定义为对象。props: / 检测类型 height: Number, / 检测类型 + 其他验证 age: type: Number, default: 0, required: true, validator: functi
5、on (value) return value = 0 1、在子组件中props选项定义属性第6章 组件传递静态或动态的数据给在子组件props中定义的属性。2、在父组件中调用子组件可以用v-bind将动态props绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件。传入的值除字符串类型的，其它类型需要v-bind指令绑定属性。第6章 组件（3）子组件调用父组件的方法父组件调用子组件时通过绑定自定义事件，把方法传递给子组件，在子组件中通过$emit触发该事件。第6章 组件6.4.2 子组件传递数据给父组件在父组件调用子组件时，通过 v-on指令绑定一个自定义事件，在父组件中定义
6、的处理函数（方法），在子组件中通过$emit触发该事件，执行该方法，通过传递参数把数据传递给父组件。（2）使用$refs（1）使用自定义事件在调用子组件时使用ref 属性，通过$refs得到ref属性值对应的组件实例，得到该实例后，父组件就有了该子组件的控制权，可以访问该子组件的数据，调用该子组件的方法等。第6章 组件6.4.3 兄弟之间的数据传递通过事件总线var bus=new Vue()，一个组件使用bus.$on侦听事件，另一个组件使用bus.$emit触发事件。事件总线可以用于任何组件之间通信，解决跨级传递的问题。第6章 组件6.5 动态组件多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用内置组件component，使用该组件的is属性动态地绑定组件，依 is 的值，来决定哪个组件被渲染。第6章 组件6.6 内置组件keep-alivekeep-alive组件主要用于保留组件状态或避免重新渲染。第6章 组件6.7插槽语法:插槽默认的内容（1）在子组件中定义插槽语法： 插入的内容 （2）在父组件调用插槽第6章 组件6.8 单个文件组件单个文件组件由结构template、 样式style、脚本script三个部分组成，结构代码如下：/结构/JavaScript/CSS第6章 组件