一个例子学会Vue组件-Vue.js学习总结

什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素。

下面将以一个实战案例来学习Vue组件的基础用法

1.如何使用组件

2.如何在组件之间进行通信（父子组件之间传递数据）

如何使用组件

我们事先写好了一段下拉选择框的代码，现在想用Vue.js实现复用，该怎么做了?

html

下拉选择框

1.注册组件

全局注册

先用用Vue.component("组件名"，{组件描述})全局注册组件(可以在任意根实例下使用，局部注册的写法可以查看Vue.js2.0中文文档)

2.在html中使用自定义标签（组件名）

自定义标签

组件的使用

但是，很多情况，我们不需要完全一样的组件。我们想要能根据不同需求变化的组件。例如，我想让左边的select按钮是查询，右边是搜索。还有，左边select选项是关于城市的，右边是关于前端知识的。该怎么解决这个问题呢？

使用props实现由父组件到子组件的数据传输

为了让下拉列表的行为更加自由，将其独立出来作为一个组件

注册一个子组件custom-list

组件结构关系为 最外层是根实例(new Vue({}),其次是custom-select,最内层是custom-list。

现在我们想从根实例开始，把数据传递到custom-select,再传递到custom-list。

首先在根实例中定义数据

然后在custom-select中声明数据传递props

再在组件标签中配合v-bind动态绑定list传入数据

子组件执行类似操作

查询，搜索按钮一样的实现思路

实现效果

现在，我们又想实现一些行为效果。比如，点击每个列表项(custom-list)，会把值传到输入框。这就成了由子组件向父组件传递数据的问题了。

使用自定义事件实现由子组件到父组件的数据传输

每个 Vue 实例都实现了事件接口(Events interface)，即：

使用$on(eventName)监听事件

使用$emit(eventName)触发事件

在子组件中使用$emit(eventName,value)触发事件

在父组件中使用v-on监听事件

组件之间的通信