Vue中的插槽和自定义指令

目录

一、插槽

1.默认插槽

2.具名插槽

3.作用域插槽

二、自定义指令

全局注册自定义指令

执行一次性初始化设置

组件vnode更新触发

局部注册自定义指令

---

一、插槽

父组件传递模板给子组件，子组件使用插槽声明slot元素承载分发内容出口。

---

1.默认插槽

父组件提供给子组件模板，默认会填充到默认插槽中

slot不设置name会隐式创建一个name为default的插槽

2.具名插槽

父组件提供了具体的模板，填充到具名插槽中

指定模板填充到具名插槽中 v-slot绑定具名插槽名称 可以简写为#

 默认插槽和具名插槽的使用：

  
  
  
  
  


  

    
      
我是父组件提供的模板{{msg}}
      
      
      
      
    
  
  

3.作用域插槽

父组件作用域使用子组件数据

父级作用域模板中获取子组件中数据 子组件向父组件传值 第二种方式

1.在子组件默认插槽中动态绑定插槽prop

2.在父组件模板中使用v-slot='插槽prop'接收子组件数据

二、自定义指令

v-xxx

全局注册自定义指令

Vue.directive('指令名称',{

当被绑定元素插入到父节点调用

inserted(el,binding,vnode,oldNode){

el---->绑定指令dom元素

binding---->元素数据 value

vnode 虚拟节点 dom对象内存中数据表示

},

    // 注册自定义指令
    Vue.directive('focus',{
      // 指令绑定dom元素执行钩子函数 调用一次
      bind(el,binding,vnode){
        console.log(el,binding);
        el.style.backgroundColor = binding.value;
      },
      // 当被绑定元素插入到父节点中
      inserted(el,binding,vnode){
        // console.log(el,binding,vnode,'2222');
        el.focus();
      }
    })

执行一次性初始化设置

bind(el,binding,vnode,oldNode){

}

组件vnode更新触发

update(el,binding,vnode,oldNode){

}

})

局部注册自定义指令

      // 局部注册自定义指令
      directives:{
        myshow:{
          inserted(){

          },
          bind(el,binding){
            el.innerHTML = binding.value;
          },
          // 指令所在组件更新vnode调用
          update(el,binding,vnode){
            console.log(el,binding,vnode,'4444');
            el.innerHTML = binding.value;
          }
        }
      },