# vue知识点

# 组件通信
- 父子组件间通讯：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 功能：可以把多个组件共用的配置提取成一个混入对象 

# 组件的自定义事件
- 第一种方式，在父组件中<Demo @:事件名="方法"/>
- 第二种方式，在父组件中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()},
~~~