原创力文档- 1、本文档共62页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
主讲古凌岚;目录;认识组件;组件构成
template:组件的模板结构，负责页面布局，需定义到template标签对中
script:组件的JavaScript行为，负责控制页面布局及其样式，需定义到script标签对中
style:组件的CSS，负责页面布局样式，需定义到style标签对中
;利用组件构建页面布局的过程
通过template选项声明模板结构
通过script中data选项声明数据、methods选项声明操作数据的函数
data既可以是页面布局内容，也可以是页面布局样式；methods操作数据，改变布局或样式;template选项
它是嵌入template标签中的组件的模板结构代码
template标签是HTML5新增特性，用于表示HTMLtemplate元素，默认情况下它的内容是不会被显示出来的
;template选项（续）
使用方法1：是直接将模板结构写入挂载点中，常用于根组件
在组件template选项中，采用模板语法的模板字符串（用反撇号进行标识）来定义（不推荐）
是先将模板结构写入HTMLtemplate元素中，再将组件template选项设置为该元素id，以建立两者的关联（推荐）
;template选项（续）
使用方法示例
;组件的使用流程
组件定义：利用JavaScript创建组件对象
组件注册：按照使用范围，对组件进行全局或局部注册，并给它起一个组件注册名
组件调用：以组件注册名为元素名，在HTML页面中调用该组件
;组件声明语法
;组件的使用流程
组件定义：利用JavaScript创建组件对象
组件注册：按照使用范围，对组件进行全局或局部注册，并给它起一个组件注册名
组件调用：以组件注册名为元素名，在HTML页面中调用该组件
;示例
创建一个名为MyComponent的组件;组件注册名的命名方式
使用kebab-case方式命名（推荐）
所有字母小写，名称中各单词用短横线“-”连接
简写方式：组件注册名与组件对象名命名相同，再使用kebab-case方式调用组件
使用PascalCase（每个单词首字母大写）方式
;全局注册
作用：被全局注册的组件可应用于整个Vue应用程序的任意组件中
语法：;组件注册;组件注册;局部注册
作用：通过组件components选项来实现的，这使得被注册的组件只能在其父组件中使用
语法：
;局部注册（续???
示例
;组件间数据传递方式
父子组件之间的通信；兄弟组件之间的通信；隔代组件之间的通信
组件间数据传递常用方式
父组件传值给子组件，它是利用组件props选项定义的属性来实现的
props属性语法
;组件间数据传递常用方式
父组件传值给子组件，它是利用组件props选项定义的属性来实现的
props属性
语法：
;props属性（续）
示例：使用props实现组件间的数据传递
;props属性（续）
示例：使用props实现父组件向子组件动态传递数据
;组件间数据传递;props的验证
作用：对props属性验证的目的是为了确保他人能正确使用组件
验证内容：包括数据类型、值范围等，允许的数据类型包括字符串（String）、数值（Number）、布尔（Boolean）、数组（Array）、对象（Object）、日期（Date）、函数（Function）和符号（Symbol）;props的验证方式
数据类型验证;props的验证方式（续）
必填值验证：通过required选项，将属性设置为必须有值且其数据类型为type选项指定的数据类型。例如：;props的验证方式（续）
默认值设置：利用default选项，可设置属性默认值。当父组件调用子组件，未在子组件元素中绑定属性，即未传递属性值时，默认值将生效。例如：;props的验证方式（续）
自定义验证函数：如果需要进行复杂验证，可以自定义验证函数来判断属性是否符合要求。例如：;组件间数据传递;组件间数据传递;Vue组件是由开发者来设计事件触发条件，也称自定义事件
Vue提供了emits选项和$emit函数，以实现组件事件的监听和处理功能
;组件事件监听与处理流程
声明和触发自定义事件。在子组件中，使用emits选项声明自定义事件；调用组件实例内置函数$emit，并以事件名称、要传递的数据为参数，触发自定义事件并传递数据给父组件
监听自定义事件。父组件调用子组件时，在子组件元素中使用v-on指令（@指令）监听自定义事件，父组件还需要声明相应的事件处理函数
;emits和$emit的使用
emits选项的语法：
$emit是组件实例的内置函数，其语法：;组件事件;组件事件;组件事件
文档评论（0）