Vue学习五：自定义指令、插槽-526互联

一、自定义指令

自定义指令:自己定义的指令,可以封装一些dom操作，扩展额外功能

全局注册语法

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

View Code

局部注册语法

directives:{
    "指令名":{
        "inserted" (el){
            //可以对el标签，扩展额外功能
        }
    }
}

View Code

案例：写一个指令，给input标签加上指令，让页面一加载就可以聚焦点

局部注册

<template>
    <div class="App">
        <h1>自定义指令</h1>
        <input v-focus type="text">
    </div>
</template>

<script>
    export default{
        directives:{
            focus:{
                inserted(el){
                    el.focus()
                }
            }
        }
    }
</script>

<style>

</style>

View Code

自定义指令-指令的值

指令值的语法:
①v-指令名= "指令值",通过等号可以绑定指令的值
②通过binding.value可以拿到指令的值
③通过update钩子，可以监听指令值的变化，进行dom更新操作

案例：自定义一个指令通过给不同的值，给标签渲染不同的颜色，赋不同的值还能渲染不同的颜色（vue指令接受数据不是响应式的，要用update监听数据的变化来赋值）

<template>
    <div class="App">
        <h1 v-color = "color1">指令一</h1>
        <h1 v-color = "color2">指令二</h1>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                color1:'blue',
                color2:'red'
            }
        },
        directives:{
            color:{
                inserted(el,binding){
                    el.style.color = binding.value
                },
                update(el,binding){
                    console.log("123")
                    el.style.color = binding.value
                }
            }
        }
    }
</script>

<style>

</style>

View Code

二、插槽

默认插槽
插槽基本语法:
1.组件内需要定制的结构部分，改用<slot></slot>占位
2.使用组件时, <MyDialog></MyDialog>标签内部,传入结构替换slot

后备内容：在slot标签中写的内容就是后备内容。

具名插槽
1. slot占位,给name属性起名字来区分
2. template配合v-slot:插槽名分发内容
v-slot:插槽名可以简化成#插槽名.

作用域插槽
(1)给slot标签,以添加属性的方式传值
(2)所有属性都会被收集到一个对象中
(3) template中,通过#插槽名= "obj"接收