vue

组件：组建的出现，就是为了能够拆分vue实例的代码，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调相对应的组件即可。
模块化：从代码逻辑的角度进行划分：方便代码开发，保证每个模块功能单一
组件化：从UI界面的角度进行划分：方便UI组件重用

创建组件的3种方式

 // 1.
    Vue.component('myComl', Vue.extend({
        template: '<h4>xxxxxxxxxxxx</h4>'
    }))
    // 2.
    Vue.component('myComl2', {
        template: '<h4>xxxxxxxxxxxx</h4>'
    })
    // 3
    Vue.component('myComl3',{
        template: '#temp'
    })

组件中的data

1.组件的data可以有自己的数据
2.组件中的data必须是一个方法，实例的data可以作为一个对象
3.组件中的data在方法内部必须返回一个对象

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

父组件传值子组件

1. 在引用的时候，通过属性绑定的形式传值v-bind:属性名

2. 父组件传递过来的属性，先在props数组中定义一下，才能使用这个数据

3. props中的数据都是只读的

子组件传值父组件

1. 在父元素methods定义方法获取

2. 事件绑定传递值$emit