组件通信

• 父子组件间通讯：props和emit、emit、emit、parent、refs和refs和refs和children、v-model
• 兄弟组件间通讯：事件总线、Vuex、localStorage
• 隔代组件间通讯：provide和inject
• 无相关组件间通讯：事件总线、Vuex、localStorage

Vue.directive(指令名, 配置对象)
或
Vue.directive(指令名, 回调函数)


Vue.directive('fbind', {
    // 指令与元素成功绑定时（一上来）
    bind(element, binding) {    // element就是DOM元素，binding就是要绑定的
      element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted(element, binding) {
      element.focus()
    },
    // 指令所在的模板被重新解析时
    update(element, binding) {
      element.value = binding.value
    }
})

Vue组件

1.定义组件 2.注册组件 3.使用组件

ref 被用来给元素或子组件注册引用信息（id替代者）应用在html标签上获取的是真实dom元素，应用在组件标签上获取的是组件实例对象vc

使用：<h1 ref="xxx"><h1/>
获取：this.$refs.xxx

props 让组件接收外部传过来的数据 注意：props是只读的。

mixin 功能：可以把多个组件共用的配置提取成一个混入对象

组件的自定义事件

• 第一种方式，在父组件中
• 第二种方式，在父组件中this.$refs.demo.$on('事件名',方法)

全局事件总线（GlobalEventBus）

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el:'#app',
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this // 安装全局事件总线
  }
})
// 绑定自定义事件（接受数据）
this.$bus.$on('xxx',方法)
// 触发自定义事件（发送数据）
this.$bus.$emit('xxx',数据)
// 最好在销毁组件时 关闭自定义事件
this.$bus.$off('xxx')

消息订阅与发布（pubsub）消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信

$nextTick 生命周期钩子 this.$nextTick(回调函数) 在下一次dom更新结束后执行其指定的回调。

当改变数据后，要基于更新后的新dom进行某些操作时，要在nextTick所指定的回调函数中执行

默认插槽、具名插槽、作用域插槽

每个组件都有自己的$route属性，里面存储着自己的路由信息

整个应用只有一个router，可以通过组件的$router属性获取到

全局守卫 meta路由源信息

// 全局前置守卫：初始化时、每次路由切换前执行
router.beforeEach((to,from,next) => {
    console.log('beforeEach',to,from)
    if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school') === 'atguigu'){ // 权限控制的具体规则
            next()    // 放行
        }else{
            alert('暂无权限查看')
        }
    }else{
        next()    // 放行
    }
})

// 全局后置守卫：初始化时、每次路由切换后执行
router.afterEach((to,from) => {
    console.log('afterEach',to,from)
    if(to.meta.title){ 
        document.title = to.meta.title //修改网页的title
    }else{
        document.title = 'vue_test'
    }
})

独享守卫

beforeEnter(to,from,next){
    console.log('beforeEnter',to,from)
    if(localStorage.getItem('school') === 'atguigu'){
        next()
    }else{
        alert('暂无权限查看')
    }
}

组件内守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {... next()},

//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {... next()},