持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第七天, 点击查看活动详情

组件插槽

1. 当组件内某一部分标签不确定怎么办?

   • 用插槽技术

2. 插槽具体如何使用?

   • 先在组件内用slot占位
   • 使用组件时, 传入具体标签插入

3. 插槽运行效果?

   • 传入的标签会替换掉slot显示

组件插槽_默认内容

1. 如何给插槽设置默认显示内容?

   • slot标签内写好默认要显示内容

2. 什么时候插槽默认内容会显示?

   • 当使用组件并未给我们传入具体标签或内容时

具名插槽

1. 组件内多处不确定的标签如何做?

   • slot占位, 给name属性起名字来区分
   • template配合v-slot:name分发要替换的标签

2. v-slot: 可以简化成什么?

   • #

作用域插槽

1. 作用域插槽什么时候使用?

   • 使用组件插槽技术时, 需要用到子组件内变量

2. 作用域插槽使用口诀?

   • 子组件在slot身上添加属性和子组件的值
   • 使用组件处template配合v-slot=“变量名”（收集slot身上的所有属性和值）

3. 我们为什么要使用作用域插槽?

   • 可以让组件更加灵活的适用于不同的场景和项目

自定义指令

1. 我们为什么要自定义指令?

   • 在Vue内置指令满足不了需求时, 可以自己定义使用

• 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx

• html+css的复用的主要形式是组件

• 你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

局部注册

07_UseDirective.vue - 只能在当前组件.vue文件中使用

<template>
  <div>
      <!-- <input type="text" v-gfocus> -->
      <input type="text" v-focus>
      
  </div>
</template>

<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
    data(){
        return {
            colorStr: 'red'
        }
    },
    directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }
    }
}
</script>

<style>

</style>

全局注册

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

全局注册自定义指令, 哪里都能用, 局部注册, 只能在当前vue文件里用

nextTick

1. data改变更新DOM是同步还是异步的?

   • 异步

2. 我们可以在哪里访问到更新后的DOM呢?

   • this.$nextTick里的函数体
   • updated生命周期钩子函数

3. $nextTick函数原地返回什么?

   • Promise对象

4. 如何在JS中主动触发标签的事件呢?

   • 获取到DOM对象, 调用事件方法