vue2组件笔记

m0_62460586

已于 2023-05-15 17:40:26 修改

阅读量177

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-03-29 22:26:09 首次发布

本文链接：https://blog.csdn.net/m0_62460586/article/details/123834133

版权

本文详细探讨了Vue2的组件特性，包括动态组件、异步加载、组件缓存策略`keep-alive`、插槽(Slots)机制、组件间的通信方式如`props/$emit`、事件总线`$bus`、`ref/parent/children`引用以及`provide/inject`的父子组件数据传递。同时，提到了`attrs`和`listeners`在封装组件时的注意事项。

摘要由CSDN通过智能技术生成

VUE组件

动态组件

// ▆ 案例：点击那个按钮切换到相对应的组件
<button
  v-for="item in tabs"
  :key="item"
  @click="setCurrentTab(item)"
  :class="{ isActive: currentTab === item }"
>
  {
   {
    item }}
</button>
<component :is="currentComponent"></component>

components: {
    TabArticle, TabHome, TabPosts }
data() {
   
    return {
   
      tabs: ["Home", "Posts", "Article"],
      currentTab: "Home",
    };
}
methods: {
   
  setCurrentTab(val) {
   
    this.currentTab = val;
  },
}
computed: {
   
  currentComponent: function () {
   
    return "tab-" + this.currentTab.toLowerCase();
  }
}

异步组件（按需加载）

我们不仅可以在路由中使用异步加载组件，也可以在页面中
引入组件
import HomeHeader from './components/Header'
改成
components: {
   
    HomeHeader: () => import('./components/Header')
｝
使用vue异步组件，可以将复杂页面的框架代码和子组件代码拆开，优先加载框架代码，显著提高页面加载速度

keep-alive(用keep-alive组件来实现组件缓存)

在这里插入图片描述

在动态组件上使用keep-alive（如tab切换组件），会保留这些组件的状态，避免反复重新渲染导致的性能问题
如果没用keep-alive，会重新创建渲染组件，造成不必要的浪费

Slots 允许外部环境将额外的内容组合在组件中。

//父组件
<child>
    <!-- 对应子组件中button的插槽 -->
    <mybutton slot="button">slot按钮</mybutton>
    <p>匿名插槽</p>
</child>

//子组件
<div class="child-btn">
    <slot name="button"></slot> // 具名插槽位置
    <slot><slot>// 匿名插槽位置
</div>

组件之间通信的方式

//◆父子通信：
父向子传递数据通过props,子向父是通过events（$emit）
通过父链、子链通信（$parent/$children/$refs）
provide/inject Api
$attrs/$lisenters
bus
vuex

props/$emit

//1.▆ Props 允许外部环境传递数据给组件
props：{
   
    //▆基础类型
    propA：Number,
    //▆多种类型
    propB:[String,Number]
    //▆必传且是字符串
    propC：{
   
    	type:String,
        required:true
    }
    //▆数字，有默认值
    propC：{
   
    	type:Number,
        default:100
    }
    //▆数组、对象的默认值应当由一个工厂函数返回
    propE:{
   
        type:Object,
        default:function(){
   
            return {
    message:'hello' }
        }
    }
    //▆自定义验证函数
    propF:{
   
        validator:function(value){
   
            return value > 10
        }
    }    
}