蘇阿細 - 组件
type: channel
link: https://www.wangchouchou.com/tag/%E7%BB%84%E4%BB%B6/
items: 组件

组件
type: item
date: 2022-05-26T07:05:00+00:00
description: 概念：局部功能或代码的集合1.使用组件的三个步骤（1）定义（创建组件）（2）注册组件（3）使用组件（写组件标签）2. 如何定义一个组件使用Vue.extend(options)创建，其中options 和 new Vue(options)传入的options几乎一致，区别如下：（1）组件中不写el，因为最终所有的组件都要经过一个vm管理，由vm中的 el决定服务于哪个容器；（2）data必须写成函数，避免组件被复用时数据存在引用关系；注：使用template可以配置组件结构3. 如何注册组件（1）局部注册：new Vue()时传入components选项；（2）全局注册：Vue.component('组件名', 组件位置)4. 编写组件标签 基本使用 5. 几个注意事项（1）组件名：一个单词组成：首字母小写 demo首字母大写 Demo多个单词组成kebab-case：my-demoCamelCase（大驼峰）：MyDemo（需在vue-cli脚手架环境中）注：组件名尽可能回避html关键字；可以使用name配置项指定组件的名称（2）组件标签第一种写法：第二种写法： ==注：第二种写法如果不在脚手架环境中，会导致后续组件无法渲染==（3）简写形式const demo = Vue.extend(options) 可简写为：const demo = options 几个注意的点 {{msg}} 6. VueComponent（1）demo组件本质是一个名为VueComponent的构造函数，由Vue.extend生成；（2）只需写 或 ，Vue解析时会帮我们创建demo组件的实例对象；（3）每次调用Vue.extend，返回的都是一个全新的VueComponent（4）关于this指向组件配置中：data，methods，watch，computed等函数中，它们的this指向均是VueComponentnew Vue(options)配置中：data，methods，watch，computed等函数中，它们的this指向均是Vue实例对象（5）VueComponent简称组件实例对象（vc） 组件的嵌套 VueComponent 7. 一个重要的内置关系VueComponent.prototype.__proto__ === Vue.prototype为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法 一个重要的内置关系