Vue系列（六）—— 组件

Hello小伙伴们，兔妞又来啦～我们都知道，Vue的特点在几处，双向绑定、组件化开发等，我们今天要聊一聊的就是组件。

Vue——组件

定义组件

我们首先要知道的是什么是Vue的组件呢，组件就是可复用的Vue实例。正是因为这样，组件能够同new Vue创建出来的根元素一样，接收相同的选项。我们就来看一下怎么定义一个组件吧～

这样，我们便创建了一个叫做rabbit-family的组件。组件创建好了，我们又要怎么调用它，让它发挥作用呢？

注册组件

完成了组件的定义，我们要注册才能够使用组件。组件的定义有两种方式：

1）全局注册：如果是全局注册，则它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中

Vue.component('component-a', { /* ... */ })

Vue.component('component-b', { /* ... */ })

Vue.component('component-c', { /* ... */ })

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

2）局部注册：局部注册的组件在其子组件中不可用

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

var ComponentC = { /* ... */ }

new Vue({

el: '#app',

components: {

'component-a': ComponentA,

'component-b': ComponentB

}

})

引用组件

组件的复用性，就是这里体现的。我们封装好一个组件后便可以在不同地方多次引用，甚至在一个页面多次引用。

组件传值

说完了组件的定义和引用，我们就要说一下组件之间的传值了，因为我们总是免不了向组件内部传值，或者获取组件中传出来的值。

1）父组件->子组件

父组件在向子组件传值的时候，直接在引用的地方传值就可以。比如：

在子组件中：我们通过props属性来获得值。

props:['rabbitName']

这样，props属性中的值，就可以于data中的值一样，双向绑定使用了。

2）子组件->父组件

子组件向父组件传值，我们采用this.$emit发送信息。

子组件中：

this.$emit("getRabbit", this.name)

这里子组件通过getRabbit自定义事件携带参数传给父组件，如果是传递多个参数：

this.$emit("getRabbit", this.name1, this.name2, this.name3)即可。

父组件中：

而在父组件中获取值则需要在调用组件的时候调用函数即可：

<rabbit-family @getRabbit="getRabbit"></rabbit-family>