Vue_组件详解

初识组件

组件（Component），是对数据和方法的简单封装。
组件化开发提高了代码的复用性和灵活性，同时提升了后期的可维护性。
vue 是一个完全支持组件化开发的框架，vue 中 .vue的后缀文件即为组件。几乎任何应用的界面都可以抽象为一个组件树。

组件组成

• < template >< /template > : 组件的模板结构
• < script >< /script > : 组件的 JavaScript 行为
• < style>< /style>：组件的样式

每个组件必须包含 template 模板结构，script 和 style 是可选组成部分。

组件的根节点

emplate模板的直接子元素就组件的根节点。

<template>
	<div>我是根节点</div>
</template>

父子组件

包含一个或多个子组件的组件是父组件。

组件注册

vue 中注册组件的方式分为“全局注册”和“局部注册”两种。

全局注册

在main.js文件中导入组件，用Vue.component方法进行注册。

 // 1. 导入需要被全局注册的组件
import Test from './components/Test.vue'

// 2. 注册组件
Vue.component('Test', Test)

局部注册

在使用的组件中注册。

 // 1