一、自定义指令
自定义指令:自己定义的指令,可以封装一些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"接收