转载一篇关于“vue学习--组件”的文章

Vue.js——60分钟组件快速入门（上篇）
Vue.js——60分钟组件快速入门（下篇）

1、关于template
注意，在书写template时，要将内容包括起来，即组件模板应该包括在一个确切的根元素中，所以用div包裹了左右的语句，如果不要div的话，浏览器就只能解析出h2一句

<template id="myTemplate">
     <div>
          <h2>this is a component!</h2>
          <slot>如果没有内容分发，则显示slot中的内容</slot>
          <p>say something.....</p>
      </div>
   </template>

2、组件作用域
组件的作用域是独立的：
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译
通俗地讲，在子组件中定义的数据，只能用在子组件的模板。在父组件中定义的数据，只能用在父组件的模板。如果父组件的数据要在子组件中使用，则需要子组件定义props。

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个处理称为内容分发slot，Vue.js 实现了一个内容分发 API，使用特殊的 元素作为原始内容的插槽。

如图：在<my-component>中使用<h1></h1>原则上是不许的，如果去掉template中的slot，则可以发现浏览器不能加载<h1>hello vue.js<h1>这句话，除非加上slot。

上面这个示例是一个匿名slot，它只能表示一个插槽。如果需要多个内容插槽，则可以为slot元素指定name属性。

3、父子组件之间的访问
有时候我们需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。
针对这几种情况，Vue.js都提供了相应的API：
父组件访问子组件：使用$children或$refs
子组件访问父组件：使用$parent 子组件访问根组件：使用$root