Vue自定义指令与Vue插槽学习

自定义指令

1.指令介绍

• 内置指令：v-html、v-if、v-bind、v-on… 这都是Vue内置的一些指令，可以直接使用
• 自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令

每个指令都有自己各自独立的功能

2.自定义指令

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

3.自定义指令语法

• 全局注册

//在main.js中
Vue.directive('指令名', {
  "inserted" (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus()
  }
})

• 局部注册

//在Vue组件的配置项中
directives: {
  "指令名": {
    inserted () {
      // 可以对 el 标签，扩展额外功能
      el.focus()
    }
  }
}

• 使用指令

注意：在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名。如：
注册指令时不用加v-前缀，但使用时一定要加v-前缀

4.指令中的配置项

inserted:被绑定元素插入父节点时调用的钩子函数
el：使用指令的那个DOM元素

自定义指令-指令的值

1.使用效果

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

2.语法

1.在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

<div v-color="color">我是内容</div>

2.通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数

示例:

<template>
  <div>
    <h1 v-color="color1">指令的值1测试</h1>
    <h1 v-color="color2">指令的值2测试</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color1:'red',
      color2:'blue'
    }
  },
  directives: {
    color:{
      //inserted提供的是元素被添加到页面时的逻辑
      inserted(el,binding){
        el.style.color=binding.value
      },
      //update提供的是元素被更新时的逻辑
      update(el,binding){
        el.style.color=binding.value
      }

    }
  }
}
</script>

<style>

</style>

插槽-默认插槽

1.作用

让组件内部的一些 结构 支持 **自定义，**将需要多次显示的对话框,封装成一个组件

2.用处

组件的内容部分，不写死，使用的时候可以自定义。传什么就显示什么

4.插槽的基本语法

1. 组件内需要定制的结构部分，改用****占位，solt里可以填写默认内容（不传入内容时就显示）
2. 使用组件时, ****标签内部, 传入结构替换slot
3. 给插槽传入内容时，可以传入纯文本、html标签、组件

插槽-具名插槽

1.作用

一个组件内有多处结构，需要外部传入标签，进行定制多处结构

2.具名插槽语法

• 多个slot使用name属性区分名字
• template配合v-slot:名字来分发对应标签

3.v-slot的简写

v-slot写起来太长，vue给我们提供一个简单写法 v-slot —> #

<template>
  <div>
    <MyDialog>
      <template v-slot:head>
        <div>
          我是大标题
        </div>
      </template>
      <template v-slot:count>
        <div>
          我是内容
        </div>
      </template>
      <template v-slot:button>
        <div>
          <button>按钮</button>
        </div>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>

<template>
  <div class="dialog">
    <div class="dialog-header">
      <slot name="head"></slot>
    </div>
    <div class="dialog-content">
      <slot name="count"></slot>
    </div>
    <div class="dialog-footer" >
      <slot name="button"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dialog {
  width: 470px;
  height: 230px;
  padding: 0 25px;
  background-color: #ffffff;
  margin: 40px auto;
  border-radius: 5px;
}
.dialog-header {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.dialog-header .close {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.dialog-content {
  height: 80px;
  font-size: 18px;
  padding: 15px 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer button {
  width: 65px;
  height: 35px;
  background-color: #ffffff;
  border: 1px solid #e1e3e9;
  cursor: pointer;
  outline: none;
  margin-left: 10px;
  border-radius: 3px;
}
.dialog-footer button:last-child {
  background-color: #007acc;
  color: #fff;
}
</style>

插槽总结

1.插槽分类

• 默认插槽
• 具名插槽

插槽只有两种，作用域插槽不属于插槽的一种分类

2.作用

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

3.场景

封装表格组件

4.使用步骤

给 slot 标签, 以 添加属性的方式传值

所有添加的属性, 都会被收集到一个对象中

2. { id: 3, msg: ‘测试文本’ }
3. 在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

<MyTable :list="list">
  <template #default="obj">
    <button @click="del(obj.id)">删除</button>
  </template>
</MyTable>