懂个锤子Vue 自定义指定、插槽：

//main.JS 中定义全局指令:
Vue.directive('自定义指令名称', {
  bind(el, binding, vnode) { /** 初始化操作 */ },
  inserted(el, binding, vnode) { /** 元素插入DOM时的操作 */ },
  update(el, binding, vnode, oldVnode) { /** 数据更新时的操作 */  },
  componentUpdated(el, binding, vnode, oldVnode) { /** 组件及子组件更新后的操作 */ },
  unbind(el, binding, vnode) { /** 解绑前的操作 */ }
});

import Directives from './JS/directives'			//自定义全局指令, JS文件目录;
import Vue from 'vue'
Vue.use(Directives);

//全局注册指令
Vue.directive('focus', {
  //inserted 会在指令所在的元素,被插入到页面中时触发
  inserted (el) {
    // el 就是指令所绑定的元素
    // console.log(el);
    el.focus()
  }
})

export default {
  name: 'App',
  //在Vue组件directives配置项中定义
  directives: {
    //自定义指令名：{ 指令的配置项 }
    myfocus: {
      inserted (el) {
        el.focus(); //对el标签: 扩展额外功能;
      }
    }
  }
}

<template>
  <div id="app">
    <input type="text" v-model="color" >
    <h1 v-color="color" >局部自定义指令</h1>    <!-- 设置v-color值来自: 输入框,同步 -->
  </div>
</template>

<script>
export default {
  name: 'App',
  //默认color 颜色: 红色;
  data(){ return { color:"red" } },
  //在Vue组件directives配置项中定义
  directives: {
    //指令名：指令的配置项
    //对el标签: 扩展额外功能;
    myfocus: { inserted (el) { el.focus(); } },
    color: {
      //inserted 提供的是元素被添加到页面中时的逻辑
      inserted (el, binding) { el.style.color = binding.value },
      //update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
      update (el, binding) { el.style.color = binding.value }
    }
  }
}
</script>
<style></style>

<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>警告:</h3>
      <span class="close">✖️</span>
    </div>
    <div class="dialog-content">
      <!-- 在需要定制的位置，使用slot占位 -->
      <slot>插值：默认显示内容;</slot>
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>

<script>
  export default { data () { return {  } } }
</script>
<!-- 省略样式代码 -->
<style scoped></style>

<template>
  <div id="app">
    <!-- 外部使用组件时,不传东西,则slot会显示后备内容 -->
    <MyDialog></MyDialog>
    <!-- 外部使用组件时,传东西了,则slot整体会被换掉 -->
    <MyDialog>组件调用完成,传递数据替换插槽值;</MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  name: 'App',
  data(){ return { } },
  components:{ MyDialog }
}
</script> 
<style></style>

<template>
  <div class="dialog">
    <!-- 一旦插槽起了名字，就是具名插槽，只支持定向分发 -->
    <div class="dialog-header">
      <slot name="head">插值头</slot>         <!-- 定义组件插值头 -->     
    </div>
    <div class="dialog-content">
      <slot name="content">插值内容</slot>    <!-- 定义组件插值内容 -->     
    </div>
    <div class="dialog-footer">
      <slot name="footer">插值内容</slot>     <!-- 定义组件插值底部 -->     
    </div>
  </div>
</template>

<template>
  <div id="app">
    <!-- 调用具名插槽需要通过template标签包裹需要分发的结构，包成一个整体 -->
    <MyDialog>
      <!-- 通过`v-slot`指令指定内容应该插入到子组件的哪个具名插槽中 -->
      <template v-slot:head>我是大标题</template>
      <template v-slot:content>我是内容</template>
      <template v-slot:footer> <button>取消</button> <button>确认</button></template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  name: 'App',
  data(){ return { } },
  components:{ MyDialog }
}
</script> 
<style></style>

<template>
  <table class="my-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年纪</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 列表数据还是原始的父子传递形式; -->
      <!-- 子组件循环渲染表格 -->
      <tr v-for="(item, index) in data" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <!-- 插槽自定义操作项: -->
        <td>
          <!-- 给slot标签添加属性的方式传值 -->
          <!-- 所有添加的属性,都会被收集到一个JSON对象中发送至父组件 -->
          <slot :row="item" msg="测试文本" ></slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
  export default {
    props: { data: Array }  //接受父组件传递数据;
  }
</script>

<template>
  <div id="app">
    <!-- 引入表格组件: 并自定义其支持删除操作 -->
    <MyTable :data="list" >                             <!-- :data 父—传递—子数据 -->
      <template #default="obj">                         <!-- 父组件自定义组件按钮,并获取子组件传递数据信息; -->
        <button @click="del(obj.row.id)">删除</button>  <!-- 在template中,通过 #插槽名="自定义变量名" 接收,默认插槽名为 #default -->
      </template>
    </MyTable>             

    <!-- 引入表格组件: 并自定义其支持查询操作 -->
    <MyTable :data="list" >
      <template #default="obj">
        <button @click="del(obj.row.id)">删除</button>
        <button @click="show(obj.row)">查看</button>
        <button @click="showdata(obj)">数据</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  name: 'App',
  data(){
    return {    //定义表格组件渲染数据: 
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ]
    } 
  },
  methods: {  //父组件对应操作函数;
    del (id) { this.list = this.list.filter(item => item.id !== id) },
    show (row) { alert(`姓名：${row.name}; 年纪：${row.age}`) },
    showdata(row) { console.log(row) },                               //将子组件solt中定义的值封装成一个JSON对象全传递过来;
  },
  components:{ MyTable }
}
</script>