vue基础笔记 组件插槽、$refs、$nextTick

1.插槽

1.1组件插槽

• 作用：让组件内的标签能动态传入。给组件插入什么标签，组件就显示什么标签。没传就用默认内容，传了就会替换
• 使用方法：
  1. 子组件内用slot标签占位
  2. 使用组件时pannel标签夹着的地方，传入标签替换slot。（pannel是子组件名）
  3. 如果外面不给传，就在slot标签内传入默认内容
     
     

1.2具名插槽

• 一个组件内有两处以上需要外部传入标签的地方
• 使用方法：
  1. 子组件内给slot标签设置name属性区分名字
  2. 父组件内template配合v-slot
  3. v-slot可以简写为 #插槽名
     
     

1.3作用域插槽

• 使用插槽时，想使用子组件内变量
• 使用方法：
  1. 子组件内给slot 绑定属性和子组件的值
  2. 父组件内template 配合v-slot
     
     

1.4具名插槽和作用域插槽一起使用

• 写法：v-slot:title=“scope”
• 简写：#title=“scope”

2.自定义指令-注册

• 当 Vue 内置指令无法满足需求时可以自定义
• 全局注册，写在main.js 里

//全局注册指令
//参数1：指令名称  不要v-
//参数2：配置对象
Vue.directive('foc',{
   
  // inserted函数
  //该函数会自动调用
  //当被该指令绑定的标签插入到 DOM 树上时被执行。  在页面上显示时执行该函数
  //执行函数时会将指令绑定的标签元素传过来
  inserted(el){
   
    el.focus()
  }
})

• 局部注册，与data同级

directives:{
   
    foc: