• vue组件和插槽

    01-v-model语法糖

    官网文档：组件使用v-model

    • v-model本质上是 value属性和input事件的一层包装

    • v-model的作用：提供数据的双向绑定

      • 数据发生了改变，页面会自动变 v-bind:value

      • 页面输入改变 ， 数据会自动变化 v-on:input

    • v-model是语法糖， v-model等价于 给一个input框提供了 :value属性以及 @input事件

    很显然如果每次使用input框，都需要提供value和input事件，比较麻烦，所以使用v-model

    • App.vue

    
​

​

    02-组件使用v-model

    • 我们经常遇到一种场景：

      1. 父组件提供一个数据给子组件使用（父传子）

      2. 子组件又需要修改父组件传过来的这个数据，所以需要子传父把值传给父组件。

    • 这种场景可以使用v-model进行简写。

      • 定义组件的时候，注意接收的值叫value， 子传父触发的事件叫 input

    如果父传子的props值叫 value, 且 子传父触发的事件叫 input 。 那么这两个功能就可以使用v-model来简写

    03-ref和$refs(vue操作dom)

    • 官方文档：API — Vue.js

    • ref作用：在vue中操作dom元素或组件vm实例

      • vue不推荐我们直接操作dom。如果真的要在vue中操作dom,可以使用ref语法

        • 说人话 ： vue不能直接操作dom，真的要操作也要按vue规定的语法来。（ref语法）

    • 每个 vue 的组件实例上，都包含一个$refs 对象，里面存储着对应的DOM 元素或组件的引用。

    ref语法使用流程语法

    (1)给标签添加自定义属性red :

    • vue会自动把页面所有的ref属性，挂载到vue实例的$ref对象中

    (2)通过 vm.$refs.属性名 获取该标签

    • 一定要注意 : vue在mounted勾子中完成页面真实DOM渲染，所以最早能获取dom的就是mounted钩子

    ref易错点

    1.添加的的时候是: ref

    2.获取的时候是: $refs

    1 给需要获取的 dom 元素或者组件, 添加 ref 属性

    2 通过 this.$refs.xxx 获取, 拿到组件可以调用组件的方法

    • 子组件代码Goods.vue

    
​

​

    04-$nextTick使用

    需求1: 点击按钮, 切换显示输入框

    
​

​

    需求2: 显示输入框的同时, 要获取焦点

    当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。

    直接调用会报错, 因为 vue 是 异步dom更新的 (提升渲染效率), this.showInput = true 执行完时, 实际的 dom 还没渲染出来

    
​
fn () {
  this.isShowInput = true
  this.$refs.inp.focus()
}

    组件的 $nextTick(callback) 方法，会把 callback 回调推迟到下一个 DOM 更新周期之后执行。

    通俗的理解是：等组件的DOM 刷新之后，再执行 callback 回调函数。从而能保证 callback 函数可以操作到最新的 DOM 元素。

    
​

​

    05-dynamic动态组件

    • 什么是动态组件: 让多个组件使用同一个挂载点，并动态切换，这就是动态组件。

      • 混淆点解读：动态组件 看起来和v-if v-else功能有些类似，但其实两者是不同的。

        • v-if v-else : 只是根据条件来决定渲染哪一个盒子，不能像组件那样复用。

        • 动态组件：通过设置组件名，让一个挂载点可以切换不同的组件

    • App.vue

    
​

    • UserAccount.vue

    • UserInfo.vue

    06-自定义指令

    • 官方文档：自定义指令 — Vue.js

    • 1.复习指令作用 ： 给标签添加额外的功能

    • 2.复习指令本质 ： 行内自定义属性

    • 3.自定义指令作用 ： 给标签添加 vue没有的，额外的功能

    1.1-自定义指令：局部注册

    • 局部注册：只能在当前组件使用

    • 需求：

      • 1.添加一个自定义指令 v-focus,作用是让input表单自动聚焦

      • 2.添加一个自定义指令v-color,作用是设置标签文本颜色

    1.2-自定义指令：全局注册

    • 全局注册： 在main.js中注册，任何地方可用

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

    07-slot匿名插槽

    课前准备

    匿名(默认)插槽使用

    插槽作用： 父组件 传递 结构 给 子组件

    官网文档：

    通过插槽分发内容

    插槽后备内容

    插槽使用2个步骤

    第一步：在子组件中定义一个插槽 默认值：如果父组件没有传递则默认显示

    第二步：在父组件中传递结构: <子组件>父组件需要传递的结构

    • 子组件goods.vue

    • 父组件App.vue

    知识点验收

    注意

    1. 插槽的作用是什么让父组件传递什么到子组件中?

      html结构

    2. 插槽的默认值写哪里?

      默认值

    08-slot具名插槽

    具名插槽语法如下

    1.给子组件的添加name属性 ： name="插槽名"

    2.父组件使用v-slot:插槽名 : 给指定的插槽传递结构

    • 注意：这个v-slot指令必须要写在