通过vue构建的实例对象其实也是一种组件 var app=new Vue(); 因为vue其他组件都是通过它来构建的，因此它又称为根组件。       自定义Vue组件:    复用、快速开发。 Vue组件的封装: Vue.component();用于定义一个组件. 第一个参数:为组件名-----'leaf-button',(必须要有两个乃至以上单词构成，且中间用中划线-连接，因为vue作者尤雨溪想到随时代发展，以后的html新标签将会越来越多，为防止冲突而制定的组件命名规则) 第二个参数是一个对象:{    },    用于放选项,不需要挂载，只有根组件需要挂载， template为模板的意思,也是一个选项 Eg: template:'<div><button>自定义按钮</button></div>',     element中文组件库 因为组件会被调用多次，因而作者尤雨溪在要求data格式时特别要求深复制，如果浅复制，则组件在一个地方被调用，所有组件的值都将被改变，如下：   组件之间可以互相嵌套，若在一个组件中嵌套了另一个组件，则此被嵌套组件必须定义在该组件之前。    

父子组件通信:

props:{    }        -------------------用于指定当前自定义组件，可以拥有的所有自定义属性. required:    是否需要.（不填会报错）     props:{     msg:{         type:String,         required:true     },     href:{         type:String,         required:false     },     arr:{         type:Array,         required:false     } } 放在props里的所有要获取的属性都不能用大写.   子组件写静态链接会跳转不过去 在CLI脚手架中，如果属性的required为false，必须要给一个默认值default：(以工厂函数形式返回) arr:{     type:Array,     required:false,     default:function(){         return [1,2,4,6,9];//若父组件有值，优先取父组件的值，没有才用默认值     } }

prop 的大小写

• 官 ： HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。

  • html 的标签和 属性 都是一样，忽略大小写
  • <H1 TITLE="哈哈">我是h1</H1>

• 官 ： 这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名不好使了

  • <child ：cMsg="pmsg"></child> 会报警告，父传子也接收不到了
  • 原因是 ： 接收的属性是：cMsg， 因为忽略大小写，已为 ： cmsg
  • 所以已经准备要读取的 是 cmsg 的值，否则要报警告
    You should probably use "c-msg" instead of "cMsg".

• 方式 1 ： 全用小写，不要使用驼峰命名 (不推荐)

  • 接收 ： cmsg
  • props/读取 ：cmsg

• 方式 2 官 ： 需要使用其等价的 kebab-case (短横线分隔命名) 命名： (推荐)

  • 接收 ： ：c-msg='pmsg'
  • props/读取 ： cMsg / this.cMsg

• 大小写在 父传子和 子传父中的应用 (都是要 带 - 的)

• • 父传子 ： ：c-msg ==> cMsg 改驼峰 - 因为props
  • 子传父 ： @todo-head = 'pAddTodo' ==> this.$emit('todo-head') 不改驼峰

• 完善 TodoMVC ： 底部隐藏+剩余完成数+清除完成

  • 计算属性 ： 已知值(todoList 在 根组件) ==> 得到一个新值(子组件里使用)
  • 父 => 子通讯

• 番外篇 ： 方法当属性传、传过来的带：得到的原型

具体如下图：