v-model 原理

原理：v-model本质上是一个语法糖。
例如应用在输入框上，就是 value属性 和 input事件 的合写。

作用：提供数据的双向绑定

① 数据变，视图跟着变 :value

② 视图变，数据跟着变 @input

注意：$event 用于在模板中，获取事件的形参

表单类组件封装 & v-model 简化代码

1、表单类组件 封装 → 实现 子组件 和 父组件数据 的 双向绑定

① 父传子：数据 应该是父组件 props 传递 过来的，拆解 v-model 绑定数据

② 子传父：监听输入，子传父传值给父组件修改

2、父组件 v-model 简化代码，实现 子组件 和 父组件数据 双向绑定

① 子组件中：props 通过 value 接收，事件触发 input

② 父组件中：v-model 给组件直接绑数据 ( :value + @input )

.sync修饰符

作用：可以实现 子组件 与 父组件数据 的 双向绑定，简化代码

特点：prop属性名，可以自定义，非固定为 value

场景：封装弹框类的基础组件， visible属性 true显示 false隐藏

本质：就是 :属性名 和 @update:属性名 合写

<BaseDialog :visible.sync="isShow" />
--------------------------------------
<BaseDialog
  :visible="isShow" 
  @update:visible="isShow = $event"
/>

props: {
  visible: Boolean
},
this.$emit('update:visible', false)

ref 和 $refs

作用：利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例

特点：查找范围 → 当前组件内 (更精确稳定)

① 获取 dom：

1. 目标标签 – 添加 ref 属性

<div ref="chartRef">我是渲染图表的容器</div>

2. 恰当时机, 通过 this.$refs.xxx, 获取目标标签

mounted () {

console.log(this.$refs.chartRef)

},

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.box'));

② 获取组件：

1. 目标组件 – 添加 ref 属性

<BaseForm ref="baseForm"></BaseForm>

2. 恰当时机, 通过 this.$refs.xxx, 获取目标组件，

就可以调用组件对象里面的方法

this.$refs.baseForm.组件方法()

Vue异步更新、$nextTick

需求：编辑标题, 编辑框自动聚焦

1. 点击编辑，显示编辑框

2. 让编辑框，立刻获取焦点

this.isShowEdit = true // 显示输入框

this.$refs.inp.focus() // 获取焦点

问题："显示之后"，立刻获取焦点是不能成功的！

原因：Vue 是 异步更新 DOM (提升性能)