【Vue】2-14、插槽 & 自定义指令

一、插槽

插槽（Slot）是 vue 为组件的封装者提供的能力。允许封装者在封装组件时，把不确定的，希望由用户指定的部分定义为插槽。  

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left>
        <!-- 
          默认情况下，在使用组件的时候提供的内容都会被填充到名称为 default 的插槽当中
          v-slot 指令只能用于 template 组件中
        -->
        <!--  <template v-slot:default> -->
        <template #default>
          <p>这是在 Left 组件中声明的 p 标签</p>
        </template>
      </Left>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";

export default {
  components: {
    Left,
  },
};
</script>

<style lang="less">
    .app-container {
        padding: 1px 20px 20px;
        background-color: #efefef;
    }
    .box {
        display: flex;
    }
</style>

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />
    <!-- 声明插槽区域 -->
    <!-- Vue 官方规定每个插槽都要有一个 name 名称，若省略了 name 属性，则有一个默认 name 名称：default -->
    <slot>
      <!-- 若用户没有在使用 Left 组件时指定插槽中的内容，即默认展示 slot 标签中的内容：官方称为 “后备内容” -->
      这是 deault 插槽中默认的内容
    </slot>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
    .left-container {
          padding: 0 20px 20px;
          background-color: orange;
          min-height: 250px;
          flex: 1;
    }
</style>

二、具名插槽 

带有 name 名称的 slot 插槽就是具名插槽  

<template>
  <div class="aricle-container">
    <!-- 文字的标题 -->
    <div class="header-box">
      <slot name="title"></slot>
    </div>
    <!-- 文字的内容 -->
    <div class="content-box">
      <slot name="content"></slot>
    </div>
    <!-- 文字的作者 -->
    <div class="footer-box">
      <slot name="author"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Article",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.aricle-container {
  > div {
    min-height: 150px;
  }
  .header-box {
    background-color: pink;
  }
  .content-box {
    background-color: lightskyblue;
  }
  .footer-box {
    background-color: lightgreen;
  }
}
</style>

<template>
  <div class="app-container">
    <h1>App 根组件</h1>

    <Article>
      <template #title>
        <h3>一首诗</h3>
      </template>
      <template #content>
        <div>
          <p>锄禾日当午，汗滴禾下土</p>
          <p>锄禾日当午，汗滴禾下土</p>
          <p>锄禾日当午，汗滴禾下土</p>
          <p>锄禾日当午，汗滴禾下土</p>
        </div>
      </template>
      <template #author>
        <p>佚名</p>
      </template>
    </Article>

    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left style="display: none">
        <!-- 
          默认情况下，在使用组件的时候提供的内容都会被填充到名称为 default 的插槽当中
          v-slot 指令只能用于 template 组件中
        -->
        <!--  <template v-slot:default> -->
        <template #default>
          <p>这是在 Left 组件中声明的 p 标签</p>
        </template>
      </Left>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Article from "@/components/Article.vue";

export default {
  components: {
    Left,
    Article,
  },
};
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

作用域插槽：  

<!-- 在封装组件时，为预留的 slot 提供属性对应的值，这种做法叫做：作用域插槽 -->
<div class="content-box">
	<slot name="content" msg="hello vue"></slot>
</div>

<template #content="obj">
 <div>
     <p>锄禾日当午，汗滴禾下土</p>
     <p>锄禾日当午，汗滴禾下土</p>
     <p>锄禾日当午，汗滴禾下土</p>
     <p>锄禾日当午，汗滴禾下土</p>
     <p>{{ obj }}</p>
 </div>
</template>

三、自定义指令 

1、私有自定义指令

在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令

directives:{
	color:{
		// 为绑定到的 HTML 元素设置红色的文字
		bind(el){
			// 形参中的 el 是绑定了此指令的、原生的 DOM 对象
			el.style.color = 'pink'
		}
	}
}

注意：

当指令第一次绑定到元素时调用 bind 函数，当 DOM 更新时 bind 函数不会触发。

update 函数会在每次 DOM 更新时被调用

directives: {
    color: {
      // 为绑定到的 HTML 元素设置红色的文字
      bind(el, binding) {
        // 形参中的 el 是绑定了此指令的、原生的 DOM 对象
        el.style.color = binding.value;
      },
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
  },

若 bind 和 update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：  

color(el, binding) {
    el.style.color = binding.value;
},

2、全局自定义指令

全局共享的自定义指令需要通过 Vue.directive() 进行声明

// 参数一：字符串，表示全局自定义指令的名字
// 参数二：对象，用来接收指令的参数值
Vue.directive('color',function(el,binfing){
	el.style.color = binding.value
})

一  叶  知  秋，奥  妙  玄  心