vue2知识点整理

1、mixin（公共代码抽离）

//vue内容：

<template>
    <div>
        <el-button @click="onClick">点一下mixin</el-button>
        <div>{{ msg }}</div>
    </div>
</template>
<script>
import mixin from "@/mixin/demo";
export default {
  data() {
    return {
    }
  },
  mixins: [mixin]
}

//mixin内容：

export default {
  data() {
    return {
      msg: "这是mixin的数据"
    };
  },
  created() {
    console.log("mixin" + 123);
  },
  methods: {
    onClick() {
      console.log("触发了mixin中的onClick");
    }
  }
};

2、provide inject组件通信（使用 provide 对外暴露方法，其他组件引用 inject，可以调用暴露的方法 ）

//a组件中

export default {
    //供子组件使用，对外暴露方法
    provide: function() {
        return {
            parentFun: this.parentFun
        };
    },
    methods: {
        parentFun() {
            console.log("进入父组件中的方法");
        }
    }
}

//b组件中

export default {
  name: "log",
  inject: ["parentFun"],
  mounted() {
    this.parentFun();
  }
};

3、兄弟通信通过时间总线

全局挂载

Vue.prototype.$bus = new Vue();

发送消息

this.$bus.$emit("sendList", this.aList);

接收消息

this.$bus.$on("sendList", data => {
    console.log(data);
});

4、keep-alive有关的生命周期

activated钩子, 用于路由缓存， keep-alive为true只进入一次mounted，每次都会进入activated函数

deactivated钩子

//router.js
{
    path: "child2",
    component: Child2,
    meta: {
        keepAlive: true
    }
}

5、store相关

<template>
    <div>
        {{ count }}
        {{ doubleCount }}
        {{ doubleCount1 }}
        {{ doubleCount2 }}
    </div>
</template>

//引入辅助函数
import { mapState, mapGetters } from "vuex";
computed: {
    ...mapState({
      //state.参数.参数；第一个参数为模块名，第二个为数据
      count: state => state.count.count
    }),
    doubleCount1() {
      return this.$store.getters.doubleCount;
    },
    ...mapGetters(["doubleCount"]),
    ...mapGetters({
      doubleCount2: "doubleCount"
    })
},
methods:{
    update() {
      //同步存值
      this.$store.commit("updateCount");
      //异步存值
      this.$store.dispatch("delayUpdateCount");
    },
}


//store中count模块

export default {
  state: {
    count: 0,
    msg: "code"
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  mutations: {
    //同步改变
    updateCount(state) {
      state.count++;
    }
  },
  actions: {
    //异步改变
    delayUpdateCount(context) {
      setTimeout(() => {
        context.commit("updateCount");
      }, 1000);
    }
  }
};

6、自定义指令

<template>
  <div>
    <div v-buried-point>自定义指令</div>
  </div>
</template>
<script>
    import buriedPoint from "@/utils/directive";
    export default {
        data() {
            return {
            }
          },
        directives: { buriedPoint },
    }
</script>

//directive.js


import Vue from "vue";
const buriedPoint = Vue.directive("buriedPoint", {
  //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  bind(el, binding, vnode) {
    function clickHandle(e) {
      if (!el.contains(e.target)) {
        return false;
      }
      console.log(e);
    }
    el.click = clickHandle;
    document.addEventListener("click", clickHandle);
  },
  //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  inserted(el) {
    // console.log(el);
  },
  //所在组件的 VNode 更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。
  update(el) {
    // console.log(el);
  },
  //只调用一次，指令与元素解绑时调用
  unbind(el) {
    // console.log(el);
  }
});

export default { buriedPoint };

7、插槽

<template>  
    <div>
        <solts>
            <!--此写法已过时<template slot="aaa" slot-scope="{one}">-->
            <template v-slot:aaa="one">
                <div>{{ one.movies }}</div>
            </template>
        </solts>
    </div>
</template>
<script>
import Solts from "@/components/solts.vue";
export default {
  name: "Child2",
  components: { Solts }
}

//solts.vue

<template>
  <div>
    插槽前
    <slot name="aaa" :movies="movies"></slot>
    插槽后
  </div>
</template>

<script>
export default {
  name: "solts",
  data() {
    return {
      movies: [
        "蜘蛛侠",
        "复仇者联盟",
        "金刚狼",
        "触不可及",
        "唐人街探案",
        "当幸福来敲门"
      ]
    };
  }
};
</script>

8、事件

//事件包含，通过.stop阻止点击父级事件时触发子级事件
<div @click="a">
    父级点击事件
    <div @click.stop="b">子级点击事件</div>
</div>

//v-on:click等同于@click
<div v-on:click="a">v-on:click点击事件</div>
<div @click="a">@click点击事件</div>

//通过.prevent阻止默认事件，即href跳转
<a href="https://www.baidu.com/">可能跳转到百度</a>
<a href="https://www.baidu.com/" @click.prevent="click1()">可能跳转到百度</a>

//.native可以在某组件的根元素上监听一个原生事件
<el-input
   v-model="searchName"
   //回车事件
   @keyup.enter.native="toSearch()"
   placeholder="请输入搜索的名称"
></el-input>

//绑定 attribute,v-bind:src等同于:src

<img v-bind:src="imageSrc" width="10" height="10" />
<!-- 缩写 -->
<img :src="imageSrc" width="10" height="10" />