vue 组件开发实战

2017-09-12 08:30:00 wshining 开源中国


什么是vue组件


组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式。


组件使用步骤


1. 定义组件

2. 注册组件

3. 使用组件

4. 上面的定义过程比较繁琐,也可以不用每次都调用Vue.component和Vue.extend方法:


组件常用方法使用


1. 嵌套组件

2. 父子组件之间的通信

使用 v-bind: (或直接用冒号) 传递数据,使用props接收数据,先看如下代码:

3. 非父子组件之间的通信

上面我们使用props只能解决父子组件之间的通信,当两个兄弟关系的组件,就不能这样传递了
兄弟节点之间需要使用 事件的触发方法 $emit去实现

代码中,我们声明了一个独立的空Vue公用实例,用来触发通讯的事件。在a组件中使用 $emit触发事件,在 c组件中使用on监听事件,就可以实现数据的传递了。

4. 动态创建组件

使用is属性动态添加组件



推荐阅读

实用即王道,超好用的 Linux 文件管理器推荐

Web 开发者需要知道的 12 个终端命令

国产开源项目又被抄袭?主角还是 00 后创业者

不仅仅是面试,JavaScript 开发者都应该知道的十个概念

点击“阅读原文”查看更多精彩内容