单文件组件

8.1组件

组件分为全局组件和局部组件,全局组件是指在不同作用域内均可使用的组件，局部组件是指只在定义该组件的作用域内可以使用的组件

注意：

组件和Vue实例类似，需要注册后才可以使用

Vue.component('name',{ template:' <div></div>' });

其中，'name' 是全局组件的名称，template代表组件的HTML代码。

对于全局组件，要先定义再使用。共需要三步：

（1）定义全局组件的模板

（2）使用模板，定义全局组件

（3）使用全局组件

 

2.局部组件

在Vue实例中，所有局部组件的定义都要使用components选项

new Vue（{ el:"#app", data:{}, //定义局部组件 components：{ 'test':{ template:'#t' data:function(){ return{ msg:'hello' } } } } }）

 

8.2 组件通信

父子组件定义

整个打的页面理解为一个根组件(可以理解为最高层级的父组件)，根组件中包含三个组件，其中一个组件下面又包含两个子组件，还有一个组件下面包含三个子组件，一步步划分

 

父子组件定义语法

components：{ "parent":{ template:"<div></div>", components:{ "child":{ template:"<div></div>" } } } }

当前组件的子组件就写到components选项中。 子组件可以认为是当前组件的细化过程，当前组件划分粒度比较大,不容易维护开发，需要划分为更加细化的组件，就产生子组件。