Vue2组件间通信

Vue2组件间通信

1.组件间通信

props

• 父子通信
  • 传递函数，子组件给父组件传递数据
  • 传递数据，父组件给子组件传递数据
• 接收：三种写法['tools'],{tools:Array},{tools:{type:Array,default:[],require:true}}
• 路由的props
  • 布尔值，把路由中params参数映射为组件props数据
  • 对象，静态数据，很少用
  • 函数形式，可以把路由中params|query参数映射为组件props数据

自定义事件

使用场景：子组件给父组件传递数据

• $on[简写@]和$emit
• 事件:原生DOM事件----【click|mouseenter…】
• 事件：自定义事件-----[子给父传递数据]

全局事件总线$bus

适用场景:万能

Vue.prototype.$bus = this

pubsub.js,在React框架中使用比较多，(发布与订阅)

适用场景:万能

Vuex

• 数据非持久化

• 适用场景:万能

• 核心概念：5

  • state

  • mutations

  • actions

  • getters

  • modules

插槽

适用场景:父子间组件通信 —(一般结构)

• 默认插槽

• 具名插槽

• 作用域插槽

2.进阶组件间通信

1)事件相关的深入学习

• 事件:事件已经学习过两种，第一种原生DOM事件，第二种自定义事件。

• 组件绑定原生DOM事件，并非原生DOM事件，而是所谓的自定义事件。

• 如果你想把自定义事件变为原生DOM事件，需要加上修饰符.native修饰

• 这个修饰符(.native)，可以把自定义事件【名字：原生DOM类型的】变为原生DOM事件，

<template>
  <div>
    <h1>EventTest组件</h1>
    <!-- 原生DOM事件 -->
    <button @click="handler">原生btn按钮</button>
    <!-- 使用Event1组件：底下这个组件  @click.native 原生DOM事件，利用事件的委派-->
    <Event1 @click.native="handler1"></Event1>
    <hr/>
    <!-- 自定义事件对于原生DOM没有任何意义 -->
    <!-- <button @erha="handler3"> 原生的btn</button> -->
    <Event2 @click="handler2" @xxx="handler2"></Event2>
    <!-- 表单元素 color:选取颜色  range：范围条 date：日历 week-->
    <input type="week" />
  </div>
</template>

&