仿豆瓣APP项目之二：Vue全家桶的使用

二、Vue全家桶的使用

1、vue框架

vue框架的重点在于组件化和可重用性。

一般vue写的组件分为两类：（1）业务型组件（直接视图层）；（2）通用型组件

一定要将组件挂载到根组件上。

vue写组件根据组件最最重要的是直线 组件间的通信，如何实现组件间的通信呢？？有四种方式：

（1）通过props属性

这一方法主要是实现父子间组件的通信

直接在父组件的<子组件 props=''>这种方式给子组件传值

props是定义在子组件上的属性值

（2）通过自定义事件

这一方法主要是实现父子间组件的通信

每个 Vue 实例都实现了事件接口，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件
• 不能用 $on 侦听子组件释放的事件，而必须在模板里直接用 v-on 绑定
  

<img  src = "../assets/search.png"   style = "width: 26px; height: 26px;"   class = "search"   @click = " showTalion " >

（3)  使用空的vue实例作为事件总线

（4）复杂情况使用状态管理模式vuex

主要是在数据很多，且不同组件之间存在数据共用情况时使用

常用的还有 slot插槽口概念

slot

• Props：

  • name - string，用于命名插槽。

• Usage：

  <slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。

使用插槽分发内容

（1）具名插槽

（2）匿名插槽

除非子组件模板包含至少一个  <slot>  插口，否则父组件的内容将会被 丢弃 。

<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应