Vue.js之组件（component）

开场

vue的组件是我一直没敢瞎说的知识点，今天，我要正儿八经的胡说八道一番了。如果Vue实例是孙悟空，组件就好比实例的一个毫毛，变化多端却为Vue实例所用。

组件的注册

有两种方式注册Vue组件：全局注册和局部注册，就好像欧元和英镑的区别，前者可以在各Vue实例中使用，后者只能在注册他的Vue实例或者父组件中使用。如果在组件中使用组件，就形成了组件的嵌套，如果组件里嵌套的组件是自己，就形成组件的递归。

总之：组件由两部分构成，

　　一部分是需要自定义的tag-name，以下面为例，tagname是<my-component>,

　　另一部分是options对象，里面包含了该组件的模板，方法，props,data等细节

全局注册：

Vue.component(‘my-component‘, {
  // 选项
})

局部注册：

var options={template:....}//组件的选项对象
new Vue({
el:‘#man‘,
components:{
‘my-component‘,options
}
});

is的作用

将组件挂载到已存在元素上时，遇到某些元素，会发生尴尬的事情：如<ul> ， <ol>， <table> ，<select>这些标签，他们只认识<li>,<tr>,<option>这些标签，想把<my-component>插进去，人家不认识，这时就要is发挥作用了：

<ul>
<my-component></my-component>
</ul>

上面这样浏览器不给面子，需要变成这样：　

<ul>
<li is=‘my-component‘></li>
</ul>

 当使用单文件组件时，就当上面是废话，也就是说<ul>中可以有组件了。（见这里）动态组件也有一个is属性，用来切换不同的组件，我们下面再说。

下面说说我觉得组件中的三个重点：prop，events和slots。当我看到组件这部分时，之前没有接触过mvvm类型的框架，所以到这里感觉是极限了，这时，找到熟悉的事物作类比是一个好办法。

在开始之前：应该记住一张图和一句话：

这张图对应的意思是：父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

想象一个场景2048游戏里面，两个子组件中的数据合并了，产生一个addscore事件，需要通知父组件容器，这时，就可以用自定义事件了：

//父组件中

<father v-on:addscore="addscore"></father>
function addscore(){
this.score++;
}

//子组件中

this.$emit(‘addscore‘);

#### props

再想象一个场景，2048中，父组件中的data中有一个定义了所有card的值的数组，现在要把这些值传到每一个card中，这时就用到props:

# to be continued

Vue.js之组件（component）

原文：http://www.cnblogs.com/imgss/p/6184328.html