Vue常用知识点记录

---

一、计算属性

二、侦听器

三、过滤器

四、组件之间通信

1、父组件向子组件传值

// father.vue


// child.vue

2、子组件调用父组件的方法

// father.vue


// child.vue

3、使用ref给子组件注册引用信息

4、EventBus

// EvenBus.js
import Vue from 'vue';
export default new Vue();

// 注册事件
import eventbus from './EventBus';

// 触发事件
import eventbus from './EventBus';

5、vuex 数据状态管理

六、vue-router 路由

1、使用this.$router.push() 编程式导航：push、go

// params 传值
this.$router.push({
    name: 'home',
    params: {
        id: 'params'
    }
})
// query传值
this.$router.push({
    path: '/',
    query: {
        id: 'query'
    }
})
// 路由地址传值
// 配置路由
{
    path: 'aaa/:id'
}
// 跳转
this.$router.push({
    path: '/aaa/${id}'
})

2、使用router-link :to 声明式导航

// params 传值
router-link传值
router-link传值
路由地址传值

3、导航守卫

// 全局前置守卫
router.beforeEach((to, from, next) => {
    // ...
});

// 全局后置钩子
router.afterEach((to, from) => {
    // ...
});

// 路由独享守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
});

// 组件内的守卫
cost Foo = {
    template: `...`,
    beforeRouteEnter (to, from, next) {
        // ...
    },
    beforeRouteUpdate (to, from, next) {
        // ...
    },
    beforeRouteLeave (to, from, next) {
        // ...
    }
}