Vue组件基础

一、Vue组件概述

1、组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

2、在大型的应用中为了分工、代码复用、提高维护性不可避免地需要将应用抽象为多个相对独立的模块。

二、组件的使用分三个步骤

1、调用 Vue.extend() 方法创建组件构造器

var MyComponent = Vue.extend({ 
    // 选项
}) 

2、调用 Vue.component() 方法注册组件。

Vue.component('my-component', MyComponent) 

3、在 Vue 实例的作用范围使用组件。

完整代码（第一种写法）

第二种写法（第一种写法里面组件template 的网页模板html代码不会提示，但是第二种写法会有提示）

注意：组件中的 data选项 必须是函数。

因为一个组件可以在多处复用，如果 data 是一个对象，那么所有复用的组件实例将都显示相同内容，如此就限制了组件复用的意义。

我没有把上面代码的data写成函数，因此Vue在控制台发出警告

 所以我们要把data写成函数形式，并用return返回

data(){
	return{
		name:"欧鹏翔",
		pro:"卖核d的小男孩",
		status:"开发中..."
	}
},

三、组件嵌套

1、组件本身也可以包含组件（例如父组件包含着子组件）

四、父子组件之间的通信（传值）

1、使用 props 属性父组件向子组件传值可以使用如下代码：

完整代码

2、父亲传值给儿子组件

父传子步骤：

    ①要在子组件声明props接受数据，自定义名字（abc）

②在父组件挂载子组件，用:abc = 父组件的数据(name)

完整代码

3、儿子组件传值给父亲组件

父传子步骤：

    ①要在子组件声明一个方法去调用事件，然后用$emit调用事件作为第一个参数，第一个参数注意用双引号，第二个参数就是传入的值，一般通过this来调用

    ②在父组件挂载子组件，通过  @事件名=父组件方法名，在方法里面可以用传入值去赋值

完整代码