Vue2.x 常用功能和方法

Vue 生命周期

• beforeCreate (组件实例刚被创建，组件属性计算之前，如 data 属性等)
• created (组件实例创建完成， 属性已绑定，但 DOM 还未生成, $el 属性不存在)
• beforeMount-比佛毛特儿 (模版编译/挂载之前)
• mounted-某儿得 (模版编译/挂载之后-不保证组件已在 document 中)
• beforeUpdate (组件更新之前)
• updated (组件更新之后)
• activated (for keep-alive 组件被激活时被调用)
• deactivated-滴阿克味得 (for keep-alive 组件被移除时调用)
• deforeDestory-滴佛丝得瑞 (组件销毁前调用)
• destoryed-滴丝尊儿 (组件销毁后调用)

Vue 钩子函数

• methods-马甚丝 (对象中定义方法)
• computed (计算属性)

Vue 组件通信

父组件和子组件通信

• props-破软丝 (传值)
• ref-瑞府 （调用子组件的方法）

// 子组件
<div>
  <p class="title">{{ title }}</p>
</div>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  methods:{
      show(data){
          console.log('----', data)
      },
  }
};
// 父组件
<MenuNav :title="title" ref="MenuNav"</MenuNav>
<p @click="show">显示</p>
import MenuNav from "@components/MenuNav/MenuNav.vue";
export default {
    data(){
        return{
            title:"这是父组件得值"
        }
    },
    methods:{
        show(){
            this.$refs.MenuNav.show('id')
        }
    }

}

子组件和父组件通信

• props-破软丝
• $parent-佩润特
• $emit 是手动触发当前实例上的一个指定事件。
• $on 是用来在监听(注册)自定义事件的。

// 父组件
<MenuNav :parentHide="parentHide" @getParent3="getParent3"></MenuNav>
import MenuNav from "@components/MenuNav/MenuNav.vue";
export default {
    data(){
        return{
            title:""
        }
    },
    methods:{
        parentShow(){
            console.log('-----父组件的方法1')
        },
        parentHide(){
            console.log('------父组件的方法2')
        },
        getParent3(data){
            console.log("------这是父组件的方法3", data);
        }
    }

}

// 子组件
<div>
  <p class="title"></p>
  <button @click="show"></button>
  <button @click="hide"></button>
  <button @click="getParent3">调用父组件的方法3</button>
</div>
export default {
  props: {
    parentHide: {
      type: Function,
      default: ()=>{},
    },
  },
  methods:{
      show(){
         this.$parent.parentShow()
      },
      hide(){
          this.parentHide()
      },
      getParent3() {
          this.$emit("getParent3", "这是子组件的值");
      },
  }
};

不相干的组件

使用 vuex

Vuex 使用

第一步在 store 增加方法

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: "默认名字",
  },
  // 格的儿丝
  getters: {
    name: (state) => state.name,
  },
  // 莫特甚丝
  mutations: {
    setName(state, data) {
      state.name = data;
    },
  },
  actions: {
    changeName({ commit }, data) {
      commit("setName", data);
    },
  },
  modules: {},
});

第二步 在需要改变的地方监听

import { mapGetters } from "vuex";
// computed 是计算属性，只要有值改变就会触发
computed: {
  ...mapGetters({
    name: "name",
  }),
},

第三步调用

<button @click="changeStoreName">改变name</button>

changeStoreName() {
  // dispatch-得丝败切
  this.$store.dispatch("changeName", "通过vue传");
},

vue-router 钩子函数（路由拦截）

全局的钩子函数

• (之前)beforeEach（to，from，next） 每次每一个路由改变的时候都得执行一遍。
• (每次之后)afterEach（to，from，next） 每次页面加载之后

单个的路由钩子函数

• (之前)beforeEnter （to，from，next）设置单个路由钩子函数

组件内的导航钩子

• beforeRouteEnter （to，from，next） 进入这个组建路由之前
• beforeRouteUpdate （to，from，next）离开这个组建路由
• beforeRouteLeave （to，from，next） 再本路由的下级路由切换才会触发

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`

  }