slot插槽以及directive自定义指令的使用

slot 插槽的基础使用

• 页面 A.vue

• 默认情况下，在使用组件的时候，提供的内容会被填充到名字为 default 的插槽中

<Left>
  <p>这段话会被插入到Left组件的 slot 中</p>
</Left>

• 如果要把内容填充到指定名称的插槽中，需要用 v-slot 指令
• v-slot 后面要跟上插槽的名称
• v-slot 指令不能直接用在元素上，必须用 template 标签包裹
• v-slot 指令简写形式 #mySlot
• 具名插槽可以接收一个组件传过来的数据，是一个对象

<Left>
  <template #mySlot="obj">
    <!-- #mySlot='{ msg }' 可以直接解构出来 -->
    <p>这段话会被插入到Left组件的 slot 中 {{obj.mag}}</p>
  </template>
</Left>

• 组件 Left.vue

1. vue 官方规定，每一个 slot 插槽都要有一个 name 属性，如果省略了 slot 的 name 属性，则有一个默认名称叫做 default 。
2. msg 可以传值给父组件

<template>
  <div>
    <h3>Left组件</h3>
    <slot>这是默认插槽的默认内容（后备内容）</slot>
    <!-- msg 可以传值给父组件 -->
    <slot name="mySlot" msg="我可以传给父组件"> </slot>
  </div>
</template>

---

---

---

---

私有（局部）自定义指令

<!-- 给自定义指令传固定值的情况下，需要加双层引号 -->
<span v-color="'red'">我是自定义指令改变的颜色</span>

1. directives 之 bind 函数

• 定义名为 color 的指令，指向一个配置对象
• 当指令第一次被绑定到元素上的时候，会立即出发 bind 函数
• 形参中的 el 表示当前指令所绑定到的那个 DOM 对象

    export default {
        directives:{
            color:{//定义名为 color 的指令，指向一个配置对象
            //当指令第一次被绑定到元素上的时候，会立即出发 bind 函数
                bind(el,binding){
                     // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
                    //  el.style.color='red'
                    el.style.color=binding.value
                }
            }
        }
    }

2. directives 之 update 函数

• bind 函数只会触发一次（必须）
• update 函数在 DOM 更新时就会触发

    export default{
        directives:{
            color:{
                bind(el,binding){
                    el.style.color=binding.value
                },
                update(el,binding){
                    el.style.color=binding.value
                }
            }
        }
    }

3. 自定义指令简写形式

• 在 bind update 逻辑一样的情况下

    export default{
        directives:{
            color(el,binding){
                el.style.color=binding.value
            }
        }
    }

全局自定义指令

• 在 main.js 中

    Vue.directive('color',{
         bind(el,binding){
             el.style.color=binding.value
            },
          update(el,binding){
              el.style.color=binding.value
          }
        }

• 简写形式（在 bind update 逻辑一样的情况下）

    Vue.directive('color',function(el,binding){
        el.style.color=binding.value
    })