vue组件和组件之间的通讯

组件简介

组件系统是vue的一个重要的概念，它允许我们使用小型、独立和通常可复用的组件构建大型应用。
创建组件的两种方式：1、全局组件 2、局部组件

1、全局组件通常使用 Vue.component(tagName,{option})的格式注册；
2、局部组件在实例中的components中注册；

注意：
1、要确保在初始化根实例之前注册了组件，即：先注册组件，再初始化根实例；
2、建议将组件提取出来放在单独js文件中，按需引入；

全局组件

说明：全局组件在所有的vue实例中都可以使用；

方式：
方式一：App.vue或main.js里面直接引入
方式二：新建一个文件夹统一放置全局组件，写一个js进行处理，然后在main.js里面引入

• extend: 使用基础vue构造器，创建一个“子类”。参数是一个包含组件选项的对象
  

局部组件

说明：局部组件，是在某一个具体的vue实例中定义的，只能在这个vue实例中使用;

动态组件

is: 切换不同的组件
keep-alive: 失活的组件将会被缓存（切换组件时，保持这些组件的状态，避免重复渲染时使用）

异步组件

1、在需要的时候从服务器加载一个模块
2、为了简化，Vue允许以工厂函数的方式；定义组件，用于异步解析组件定义；
3、只有组件被渲染的时候才触发该工厂函数，且会把结果缓存起来供以后重新渲染使用；

组件之间通讯

方法：
1、父组件（调用方）与子组件（被调用方）的数据传递：props
2、子组件向父组件传递数据：$emit();
3、子组件与子组件（兄弟组件）数据传递：vuex、eventBus

• eventBus 和 vuex :
  eventBus:(主要是实现途径是在要相互通讯的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递）；
  当组件比较复杂需要传递的数据比较多的时候可以使用vuex来管理；

• 父–>子 props
  注意：属性的值必须在组件中通过props属性来显示指定，否则不会生效；
  说明：传递过来的props属性的用法与data属性的用法相同；
  

注意：
 1、子组件中的驼峰命名的prop名在父组件赋值的时候需要使用其等价的短横线分割命名；
 2、props如果不加类型校验则是一个数组，若加上类型校验则是一个对象；

• 子–>父：$emit()
  说明：借助vue中的自定义事件 (v-on:cunstomFn=“fn”)
  步骤：
  1、在父组件中定义方法parentFn;
  2、在子组件引入标签中绑定自定义事件 v-on: 自定义事件名=“父组件中的方法” ==> @pfn=“parentFn”；
  3、子组件中通过**emit()触发自定义事件this.emit(pfn,参数列表);

props里面的属性字段是单向的，只能是父组件传递给子组件，如果在子组件对其修改其父组件是没有用的；子组件如果想给父钻机宁晋县反馈，通过在子组件利用emit()定义一个事件回调函数；

<template>
    <div>
      <button v-on:click="btnClickEvent">
        子组件的按钮
      </button>
    </div>
</template>

<script>
export default {
  name: 'child-parent',

  methods: {
    // 在子组件内部通过emit定义btn-click事件,在父组件中去监听btn-click事件并实现对其的响应
    btnClickEvent: function () {
      this.$emit('btn-click')
    }
  }
}
</script>

<style scoped>
</style>
------------------- 分割线: 以下是调用上面子组件的父组件 ---------------------
<!-- 子组件通过emit注册的事件回调父组件的事件响应函数 -->
<template>
  <div>
    <!-- 监听子组件预定义的btn-click事件 -->
    <child-parent @btn-click="callback_fn"></child-parent>
  </div>
</template>

<script>
import childParent from '@/components/child-parent'
export default {
  name: 'emit',
  methods: {
    callback_fn () {
      alert('父组件预定义的供子组件回调的函数 ==> (由子组件触发)')
    }
  },
  components: {
    childParent
  }
}
</script>

<style scoped>
</style>

Props是向下传递数据，事件是向上传递数据

• 兄弟组件： Vuex
  把各组件间用到的共享数据，抽离出到一个全局共享变量中，交由vuex进行集中管理；
  将vuex引入到当前工程：
  1、安装： npm install vuex --save
  2、定义Vuex对象：store/store.js文件*(若无则新建) 中定义一个new Vuex.Store对象;
  3、在src/main.js中的vue实例中引入vuex store;

Vue 路由实现 hash 模式和history 模式

• hash模式：在浏览器中符号**#**以及 # 后面的字符称为 hash，用 window.location.hash 读取；
• 特点：hash 虽然在URL 中，但不包括在HTTP请求中，用来指导浏览器动作，对服务端安全无用， hash 不会重新加载页面。
• history模式：history 采用HTML5的新特性；且提供了两个新方法：pushState()、replaceState() 可以对浏览器历史记录栈进行修改，以及 popState 事件监听到状态变更。

vue路由钩子函数

首页可以控制导航跳转，beforeEach、afterEach等。一般用于页面 title 的修改，一些需要登录才能调整页面重定向功能。

• beforeEach：主要的3个参数 to、form、next；
• to：是route 即将要进入的目标路由对象；
• from：是 route 当前导航正要离开的路由；
• next：function 一定要调用该方法 resolve 这个钩子，执行效果依赖 next 方法的调用参数，它可以控制页面的跳转；