Vue.js学习笔记：组件

一.组件？

1.组件 (Component) 是 Vue.js 最强大的功能之一

2.组件可以扩展 HTML 元素，封装可重用的代码

3.组件是自定义元素

二.使用组件

Vue组件的使用有2个步骤，注册组件，使用组件2个方面

1.注册

要注册一个全局组件，你可以使用 Vue.component(tagName, options)。例如：

Vue.component('my-component', {
  template: '
A custom component!
'
})

注意：

① Vue.component(tagName, options)//注册全局组件： (组件名称 组件构造器)  

组件构造器：

//创建一个组件构造器  
var myComponent = Vue.extend({  

   template:'

A custom component!

'  
})  

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

②对于自定义标签名，小写并且包含一个短杠，尽管遵循这个规则比较好。

2.实例化

new Vue({
  el: '#app'
})

三.简单的例子

使用Vue，必须要引用它的js:import Vue from 'vue';

1.全局组件

2.局部组件

3.data传值（必须是函数）

四.定制组件的 v-model

一个组件的 v-model 会使用 value 属性和 input 事件，但是诸如单选框、复选框之类的输入类型可能把 value 属性用作了别的目的,model 选项可以回避这样的冲突：

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    // this allows using the `value` prop for a different purpose
    value: String
  },
  // ...
})

上述代码等价于：