什么是组件?
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素。
下面将以一个实战案例来学习Vue组件的基础用法
1.如何使用组件
2.如何在组件之间进行通信(父子组件之间传递数据)
如何使用组件
我们事先写好了一段下拉选择框的代码,现在想用Vue.js实现复用,该怎么做了?
1.注册组件
先用用Vue.component("组件名",{组件描述})全局注册组件(可以在任意根实例下使用,局部注册的写法可以查看Vue.js2.0中文文档)
2.在html中使用自定义标签(组件名)
但是,很多情况,我们不需要完全一样的组件。我们想要能根据不同需求变化的组件。例如,我想让左边的select按钮是查询,右边是搜索。还有,左边select选项是关于城市的,右边是关于前端知识的。该怎么解决这个问题呢?
使用props实现由父组件到子组件的数据传输
为了让下拉列表的行为更加自由,将其独立出来作为一个组件
组件结构关系为 最外层是根实例(new Vue({}),其次是custom-select,最内层是custom-list。
现在我们想从根实例开始,把数据传递到custom-select,再传递到custom-list。
查询,搜索按钮一样的实现思路
现在,我们又想实现一些行为效果。比如,点击每个列表项(custom-list),会把值传到输入框。这就成了由子组件向父组件传递数据的问题了。
使用自定义事件实现由子组件到父组件的数据传输
每个 Vue 实例都实现了事件接口(Events interface),即:
使用$on(eventName)监听事件
使用$emit(eventName)触发事件