Vue.js 组件

组件用于封装页面的部分功能，将功能的结

构、样式、逻辑代码封装为整体。提高功能的复用性与可维护性，更好的专注

于业务逻辑。组件使用时为自定义 HTML 标签形式，通过

组件名作为自定义标签名。

• 组件注册

• 组件通信

• 组件插槽

• 内置组件

 组件注册

• 全局注册

• 组件基础

• 局部注册

全局注册

 

• 全局注册的组件在注册后可以用于任意实例或组件中。

• 注意：全局注册必须设置在根 Vue 实例创建之前。

组件基础

• 本质上，组件是可复用的 Vue 实例，所以它们可与 new Vue 接

收相同的选项，例如 data、methods 以及生命周期钩子等。

• 仅有的例外是像 el 这样根实例特有的选项。组件基础

• 需要讲解的内容为：

• 组件命名规则

• template 选项

• data 选项组件命名规则

• 组件具有两种命名规则：

• kebab-case：'my-component’

• PascalCase：'MyComponent

示例如下：

 

• 注意：无论采用哪种命名方式，在 DOM 中都只有 kebab-case 可

以使用

template 选项

• template 选项用于设置组件的结构，最终被引入根实例或其他组

件中。

 

• 注意：组件必须只有一个根元素

data 选项

• data 选项用于存储组件的数据，与根实例不同，组件的 data 选

项必须为函数，数据设置在返回值对象中。

data 选项

• 这种实现方式是为了确保每个组件实例可以维护一份被返回对象

的独立的拷贝，不会相互影响

局部注册

• 局部注册的组件只能用在当前实例或组件中。

 单独配置组件的选项对象：

 ES6 的对象属性简写：