Vue2向Vue3过度核心技术进阶语法

以你之姓@ 2024-03-24 21:37 124阅读 0赞

#### 目录 ####

*   *  1 v-model简化代码
     *   *  1.目标：
         *  2.如何简化：
         *  3.代码示例
     *  2 sync修饰符
     *   *  1.作用
         *  2.场景
         *  3.本质
         *  4.语法
         *  5.代码示例
         *  6.总结
     *  3 ref和$refs
     *   *  1.作用
         *  2.特点：
         *  3.语法
         *  4.注意
         *  5.代码示例
     *  4 异步更新 & $nextTick
     *   *  1.需求
         *  2.代码实现
         *  3.问题
         *  4.解决方案

--------------------

### 1 v-model简化代码 ###

![在这里插入图片描述][69898f17611b4b26b5770c852716d2d9.png]

#### 1.目标： ####

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

#### 2.如何简化： ####

v-model其实就是 :value和@input事件的简写

*  子组件：props通过value接收数据，事件触发 input
 *  父组件：v-model直接绑定数据

#### 3.代码示例 ####

子组件

<select :value="value" @change="handleChange">...</select>
    props: {
      value: String
    },
    methods: {
      handleChange (e) {
        this.$emit('input', e.target.value)
      }
    }

父组件

### 2 sync修饰符 ###

#### 1.作用 ####

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

简单理解：**子组件可以修改父组件传过来的props值**

#### 2.场景 ####

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

#### 3.本质 ####

.sync修饰符 就是 **:属性名** 和 **@update:属性名** 合写

#### 4.语法 ####

父组件

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

子组件

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

#### 5.代码示例 ####

App.vue

<template>
      <div class="app">
        <button @click="openDialog">退出按钮</button>
        <BaseDialog :isShow="isShow"></BaseDialog>
      </div>
    </template>
    
    <script>
    import BaseDialog from './components/BaseDialog.vue'
    export default {
      data() {
        return {
          isShow: false,
        }
      },
      components: {
        BaseDialog,
      },
    }
    </script>
    
    <style>
    </style>

BaseDialog.vue

<template>
      <div class="base-dialog-wrap" v-show="isShow">
        <div class="base-dialog">
          <div class="title">
            <h3>温馨提示：</h3>
            <button class="close">x</button>
          </div>
          <div class="content">
            <p>你确认要退出本系统么？</p>
          </div>
          <div class="footer">
            <button>确认</button>
            <button>取消</button>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        isShow: Boolean,
      }
    }
    </script>
    
    <style scoped>
    .base-dialog-wrap {
      width: 300px;
      height: 200px;
      box-shadow: 2px 2px 2px 2px #ccc;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 0 10px;
    }
    .base-dialog .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid #000;
    }
    .base-dialog .content {
      margin-top: 38px;
    }
    .base-dialog .title .close {
      width: 20px;
      height: 20px;
      cursor: pointer;
      line-height: 10px;
    }
    .footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 26px;
    }
    .footer button {
      width: 80px;
      height: 40px;
    }
    .footer button:nth-child(1) {
      margin-right: 10px;
      cursor: pointer;
    }
    </style>

#### 6.总结 ####

1.父组件如果想让子组件修改传过去的值 必须加什么修饰符？

2.子组件要修改父组件的props值 必须使用什么语法？

### 3 ref和$refs ###

#### 1.作用 ####

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

#### 2.特点： ####

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

#### 3.语法 ####

1.给要获取的盒子添加ref属性

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

2.获取时通过 $refs获取 this.$refs.chartRef 获取

mounted () {
      console.log(this.$refs.chartRef)
    }

#### 4.注意 ####

之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子

#### 5.代码示例 ####

App.vue

<template>
      <div class="app">
        <BaseChart></BaseChart>
      </div>
    </template>
    
    <script>
    import BaseChart from './components/BaseChart.vue'
    export default {
      components:{
        BaseChart
      }
    }
    </script>
    
    <style>
    </style>

BaseChart.vue

<template>
      <div class="base-chart-box" ref="baseChartBox">子组件</div>
    </template>
    
    <script>
    // yarn add echarts 或者 npm i echarts
    import * as echarts from 'echarts'
    
    export default {
      mounted() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelect('.base-chart-box'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: 'ECharts 入门示例',
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        })
      },
    }
    </script>
    
    <style scoped>
    .base-chart-box {
      width: 400px;
      height: 300px;
      border: 3px solid #000;
      border-radius: 6px;
    }
    </style>

### 4 异步更新 & $nextTick ###

#### 1.需求 ####

编辑标题, 编辑框自动聚焦

1.  点击编辑，显示编辑框
2.  让编辑框，立刻获取焦点

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWwVXolt-1692978673100)(assets/1682394495346.png)\]

#### 2.代码实现 ####

<template>
      <div class="app">
        <div v-if="isShowEdit">
          <input type="text" v-model="editValue" ref="inp" />
          <button>确认</button>
        </div>
        <div v-else>
          <span>{
       { title }}</span>
          <button @click="editFn">编辑</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: '大标题',
          isShowEdit: false,
          editValue: '',
        }
      },
      methods: {
        editFn() {
            // 显示输入框
            this.isShowEdit = true  
            // 获取焦点
            this.$refs.inp.focus() 
        }  },
    }
    </script>

#### 3.问题 ####

“显示之后”，立刻获取焦点是不能成功的！

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

#### 4.解决方案 ####

$nextTick：**等 DOM更新后**,才会触发执行此方法里的函数体

**语法:** this.$nextTick(函数体)

this.$nextTick(() => {
        
      this.$refs.inp.focus()
    })

**注意：**$nextTick 内的函数体 一定是**箭头函数**，这样才能让函数内部的this指向Vue实例

[69898f17611b4b26b5770c852716d2d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/8b723465027a438e9dc50e308d1a5dbc.png