vue2 动态组件 和 插槽

1.< component >动态组件:

动态组件就是可以改变的组件, 它通常用来解决 多组件在同一位置切换显示的需求

语法: < component :is="要显示的组件" >< /component >

使用方法:

在子组件中, 使用 name 来为组件自定义组件名

在父组件中, 可以将子组件的自定义组件名赋值给一个vue变量

在父组件中, 设置挂载点component , 使用component标签的 自定义属性 :is="vue变量" 设置要显示的组件

通过修改vue变量的值从而实现在同一位置动态切换显示不同组件

2.directive 自定义指令

自定义指令就是自己定义指令, 封装DOM操作, 拓展额外功能

它的好处是可以避免频繁的操作DOM, 可以便于复用

有两种注册方式:

全局注册: 在main.js文件中, 使用 Vue.directive 利用 inserted函数全局注册自定义指令

inserted函数有两个参数: 一个是原生DOM对象, 另一个是指令相关的所有参数

其中, inserted函数会在指令绑定的元素被插入到DOM时自动执行

update函数会在指令的值发生变化时自定执行

Vue.directive('自定义指令名', {   
  inserted (DOM对象, 指令) {   
    // 也可以通过解构获得第二个参数的value值  { value }
  },
  updated (el, { value }) {  
      
  }
})

使用时直接在标签内 添加 v-自定义指令名

局部注册:

export default {
  directives: {
    自定义指令名: {
      inserted(el, binding) {   
          
      }
    }
  }
}

3.插槽

插槽的作用: 可以让组件动态渲染标签, 他大大提高了组件的灵活性

1.默认插槽

子组件内使用 < slot > 标签 占位, 父组件传入插槽可以替换掉 < slot > 标签

如果父组件没有给插槽传值, 就会默认显示 < slot > 默认内容< /slot >标签内的默认内容

2.具名插槽

如果有名字 name, 就必须指定 name 传入

语法:

子组件中使用slot标签占位, 并设置name

<slot name="属性值111"></slot>

父组件中, 使用template标签配合 #name属性值来传入标签

#name 是 v-solt 的简写形式

3.作用域插槽

定义 slot 插槽的同时可以传值, 插槽上绑定数据使用组件时可以用

<slot name="MyProject" :age="age" :gender="gender" info="信息"></slot>

父组件中使用子组件时

<子组件> 中的 < template >标签中,  通过  v-slot:插槽名="obj对象名" 来接收收集的数据

#插槽名="obj对象名" 中的 obj本质上就是 形参 , 可以自己定义变量名名, 用来接收传过来的整个对象

之所以叫做作用域插槽, 是因为:

获取的变量只能在 < template >标签内使用, 超出这个范围就无法使用了, 所以叫做 作用域插槽

<子组件名>
  <!-- 也可以使用 解构写法  { age, gender, info } 就可以直接使用变量名 -->
  <template #MyProject="obj">    
    <!-- {{ obj }} -->
    <button>{{ obj.age }}</button>     
    <button>{{ obj.gender }}</button>
    <button>{{ obj.info }}</button>
  </template>
</子组件名>