Vue2基础八、插槽

零、文章目录

Vue2基础八、插槽

1、插槽

（1）默认插槽

• 作用：让组件内部的一些 结构 支持 自定义
• 需求: 将需要多次显示的对话框, 封装成一个组件
• 问题：组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办？

• 插槽基本语法：
  • 组件内需要定制的结构部分，改用占位
  • 使用组件时, 标签内部, 传入结构替换slot

• 代码实现

  • 父组件App.vue
  • 子组件MyDialog.vue

（2）后备内容（默认值）

• 通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白
• 能否给插槽设置 默认显示内容 呢？

• 插槽后备内容：封装组件时，可以为预留的 插槽提供后备内容（默认内容）。

• 语法: 在 标签内，放置内容作为默认内容，后备内容

  • 外部使用组件时，不传东西，则slot会显示后备内容

  • 外部使用组件时，传东西了，则slot整体会被换掉

  我是内容
  

• 代码实现

  • 父组件App.vue
  • 子组件MyDialog.vue

（3）具名插槽

• 需求：一个组件内有多处结构，需要外部传入标签，进行定制
• 默认插槽：一个的定制位置

• 具名插槽语法:
  • 多个slot使用name属性区分名字
  • template配合v-slot:名字来分发对应标签
  • v-slot:插槽名 可以简化成 #插槽名

• 代码实现：

  • 父组件App.vue
  • 子组件MyDialog.vue

（4）作用域插槽

• 作用域插槽: 定义 slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用。

• 场景：封装表格组件

  • 父传子，动态渲染表格内容
  • 利用默认插槽，定制操作列
  • 删除或查看都需要用到 当前项的 id，属于 组件内部的数据通过 作用域插槽 传值绑定，进而使用

  

• 基本使用步骤：

  • 给 slot 标签, 以 添加属性的方式传值
  • 所有添加的属性, 都会被收集到一个对象中

  { id: 3, msg: '测试文本' }
  

  • 在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

• 代码实现

  • 父组件App.vue
  • 子组件MyTable.vue

2、综合案例-商品列表

（1）功能需求

• my-tag 标签组件封装
  • (1) 双击显示输入框，输入框获取焦点
  • (2) 失去焦点，隐藏输入框
  • (3) 回显标签信息
  • (4) 内容修改，回车 → 修改标签信息
• my-table 表格组件封装
  • (1) 动态传递表格数据渲染
  • (2) 表头支持用户自定义
  • (3) 主体支持用户自定义

（2）代码实现

• 父组件App.vue

• 子组件MyTable.vue

• 子组件MyTag.vue

• 入口main.js注册自定义指令

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 封装全局指令 focus
Vue.directive('focus', {
  // 指令所在的dom元素，被插入到页面中时触发
  inserted (el) {
    el.focus()
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')