Vue3组件化开发(二)&(三)

p12Vue3其他语法补充

---

非父子组件通信

provide和inject

处理响应式数据

Mitt事件总线库

插槽

具名插槽的使用

作用域插槽

p13

---

<template>
  <button
    :class="{ active: currentItem === item }"
    v-for="item in names"
    :key="item"
    @click="itemClick(item)"
  >
    {
   
   { item }}
  </button>
  <br />

  <component :is="currentItem"></component>

  <!-- <template v-if="currentItem === 'home'">
    <home></home>
  </template>
  <template v-else-if="currentItem === 'about'">
    <about></about>
  </template>
  <template v-else>
    <category></category>
  </template> -->
</template>

<script>
import Home from "./HomeView.vue";
import About from "./AboutView.vue";
import Category from "./CategoryView.vue";
export default {
      
      
  components: {
      
      
    Home,
    About,
    Category,
  },
  data() {
      
      
    return {
      
      
      names: ["home", "about", "category"],
      currentItem: "home",
    };
  },
  methods: {
      
      
    itemClick(item) {
      
      
      this.currentItem = item;
    },
  },
};
</script>

<style scoped>
.active {
      
      
  color: red;
}
</style>

动态组件

keep-alive

webpack的代码分包

异步组件

为什么要用异步组件？
实现代码分包

refs

生命周期

组件的v-model