Vue 动态组件与插槽应用-优快云博客

本文链接：https://blog.youkuaiyun.com/wr_qianduan/article/details/123216373

这篇博客介绍了Vue中动态组件的使用，包括如何在同一挂载点切换不同组件以实现动态显示，并讲解了组件缓存的概念，利用`keep-alive`来避免频繁创建和销毁组件以提高页面性能。同时，文章还详细阐述了组件插槽和作用域插槽的使用，特别是当需要传递数据到插槽时的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态组件: 在同一挂载点,可以切换显示不同组件

步骤:

1. 引入组件名

2. 定义变量 显示 组件名    comName: 'UserName',

3. 设置挂载点 <component :is="comName"></component>

4. 绑定点击事件 =变量=组件名

组件缓存

使用 keep-alive 把要缓存的组件包起来

缓存好处?
不会频繁的创建和销毁组件, 页面更快呈现

组件插槽 (v-slot: 简写成 # )

使用场景: 组件内某一部分标签不确定时

使用步骤:

1. 组件内使用 <slot> </slot> 占位

2.使用组件时,传入具体变迁插入:

Pannel.vue-----

 <slot name="contain"></slot>



App.vue ------

引入Pannel

<Pannel>

<template #contain>   插入的内容   </template>

   </Pannel>

作用域插槽(需要数据时使用)

子组件, 在slot上绑定属性和子组件内的值
使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
scope变量名自动绑定slot上所有属性和值
:row=obj
scope:{

row:obj

}

5. 传照片:

App-----  引入MyTable 

<!--MyTable组件 占位 -->
            <slot :row="obj">{{ obj.headImgUrl }}</slot>



App-----

 <MyTable :arr="list">
      <template v-slot="scope">
        <a :href="scope.row.headImgUrl">{{ scope.row.headImgUrl }}</a>
      </template>
    </MyTable>


步骤:

1. App传数据   2. MyTable循环数据  3. 占位<slot :row="obj"> </slot>  4. 对应 <template v-slot="scope">

使用场景 使用插槽,使用子组件变量的时候
子
<slot :row='obj'>
父
<template v-slot='str'>
{{str.row.name}}

自定义指令 注册
全局
Vue.directive('指令名',{
inserted(el){
el.focus()
}
})

局部

directives:{
'指令名':{
inserted(el){
el.focus()
    }
  }
}

<template>
  <div>
      <input type="text" v-focus>
      
  </div>
</template>

 directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }

update( ) //值改变时

    }   



// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行

调用:v-指令名.
传值
Vue.directive('color',{
inserted(el,binding){
el.style.color=binding.value
}
update(el,binding){
el.style.color=binding.value
})
update:是可以修改值得内容,