component

component 是什么

动态组件，通过:is 来决定哪个组件需要被渲染

component 的使用

1. 动态组件
2. props/$emit 组件通信
3. provide/inject 组件通信
4. keep-alive 缓存组件

• index.vue

<template>
  <div>
    <button @click="currentComponent = !currentComponent">check</button>
    <keep-alive>
      <component :is="currentComponent ? 'A' : 'B'" :propData="currentComponent ? propData1 : propData2" @checkToA="checkToA"></component>
    </keep-alive>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  provide: {
    index: Vue.observable({ name: "hello world" })
  },
  components: {
    A: () => import("@/components/a"),
    B: () => import("@/components/b")
  },
  name: "",
  data() {
    return {
      propData1: {
        name: "koa"
      },
      propData2: {
        name: "egg"
      },
      currentComponent: false
    };
  },
  methods: {
    checkToA(data) {
      console.log("我是a的data", data);
    }
  },
  watch: {},
  created() {},
  updated() {},
  mounted() {}
};
</script>

<style scoped lang="less"></style>

• a.vue

<template>
  <div>A</div>
</template>

<script>
export default {
  inject: ["index"],
  props: {
    propData: Object
  },
  components: {},
  name: "",
  data() {
    return {};
  },
  methods: {},
  created() {
    console.log("a", "created");
    console.log(this.index);
    this.$emit("checkToA", "checkToA");
  },
  mounted() {
    console.log("a", "mounted");
  },
  activated() {
    console.log("a", "activated");
  },
  deactivated() {
    console.log("a", "deactivated");
  }
};
</script>

<style scoped lang="less"></style>

• b.vue

<template>
  <div>B</div>
</template>

<script>
export default {
  props: {
    propData: Object
  },
  components: {},
  name: "",
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {}
};
</script>

<style scoped lang="less"></style>

参考

component