Vue2.0最基础的组件使用

一、全局组件与局部组件的认识

二、使用组件时自定义参数的传递（给子组件传参）

组件和函数类似，可以通过接收参数来是自己具备一定的通用性。函数注册时有形参，函数调用的时候有实参，由此，组件注册的时候也需要决定一下组件的形参，写法上虽略有不同，但核心思想是一样的。通过props，最简单的一种，以数组的方式。接收几个参数，就在数组中添加几个形参名。光有形参是不够的，在使用时需要给一个实参，在标签里加上对应属性即可。

三、组件开始具备一定功能，管理自己的一些状态

以上都是最简单的组件，仅用来了解组件的基本使用方法，当组件具备一些比较复杂的功能，需要管理自己的一些状态时：

 

每次使用组件时调用data函数，调用时返回一个对象，使得子组件之间执行自己功能时互不干扰，组件复用时都有自己独立的对象。

data为什么是一个函数而不是对象？

vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

四、子组件向父组件传递

首先，在接收方也就是父组件当中定义一个自定义事件；然后，在子组件当中找到合适时机触发父组件中的自定义事件，触发的方式是通过this.$emit('自定义事件'，'传递内容')；接收通过在自定义事件的处理函数当中用形参接住就可以了。

    

        
        
{{child1}}
        
        
{{child2}}